使用FlexiGrid实现Extjs表格的效果

1、窗体顶端使用flexigrid实现extjs表格的效果 近一段时间extjs真的是风光无限好，只要是个做crm/hrm之类的企业现在都在琢磨怎么在项目中用它，不过兄弟我可是不敢，原因很简单：太大/太笨 /源码不好调试。但是对于extjs漂亮的表格与功能的强大，实在是让我垂涎三尺，记得以前有个老外同志写过一个类似的extjs的jquery插件，所 以就在jquery的插件海洋中一顿海找，呵呵，还真让我找到了。看来还是我的jquery好，小巧简单好像一部好的汽车引擎，我想要什么就可以自已 diy，真是方便。总体方案在网络传输上不超过80kb，速度比500kb大小的extjs不知道要小上多少哪。有段

2、时间不写东西了，怕说的不清楚。有需要代码的朋友可以访问我的网盘： 下载地址： 不过由于flexigrid在互联网上的大部分资料都是用php或者java写的，所以兄弟简单的对它进行了改制，也做了一个山寨版的extjs表格实现，希望对大家有帮助。基本使用：1 基本使用是非常简单的，只需要加入jquery库与flexigrid的js即可以对表格进行格式化与美化. 1: 2: 3: 4: 5: 6: 7: %-% 8: 9: 10: $(document).ready(function() 11: $(#flexme1).flexigrid(); 12: $(#flexme2).flexigrid()

3、; 13: ); 14: 2 加入需要格式化的表格即可 1: 2: 最简单的flexigrid表格-1 3: 4: 5: 6: 7: col 1 8: 9: 10: col 2 11: 12: 13: col 3 is a long header name 14: 15: 16: col 4 17: 18: 19: 20: 21: 22: 23: this is data 1 with overflowing content 24: 25: 26: this is data 2 27: 28: 29: this is data 3 30: 31: 32: this is data 4 33:

4、34: 35: 36: 37: this is data 1 38: 39: 40: this is data 2 41: 42: 43: this is data 3 44: 45: 46: this is data 4 47: 48: 49: 50: 51: this is data 1 52: 53: 54: this is data 2 55: 56: 57: this is data 3 58: 59: 60: this is data 4 61: 62: 63: 64: 65: this is data 1 66: 67: 68: this is data 2 69: 70: 71

5、: this is data 3 72: 73: 74: this is data 4 75: 76: 77: 78: 79: this is data 1 80: 81: 82: this is data 2 83: 84: 85: this is data 3 86: 87: 88: this is data 4 89: 90: 91: 92: 93: this is data 1 94: 95: 96: this is data 2 97: 98: 99: this is data 3 100: 101: 102: this is data 4 103: 104: 105: 106: 1

6、07: this is data 1 108: 109: 110: this is data 2 111: 112: 113: this is data 3 114: 115: 116: this is data 4 117: 118: 119: 120: 121: this is data 1 122: 123: 124: this is data 2 125: 126: 127: this is data 3 128: 129: 130: this is data 4 131: 132: 133: 134: 135: this is data 1 136: 137: 138: this i

7、s data 2 139: 140: 141: this is data 3 142: 143: 144: this is data 4 145: 146: 147: 148: 149: this is data 1 150: 151: 152: this is data 2 153: 154: 155: this is data 3 156: 157: 158: this is data 4 159: 160: 161: 162: 163: this is data 1 164: 165: 166: this is data 2 167: 168: 169: this is data 3 1

8、70: 171: 172: this is data 4 173: 174: 175: 176: 177: this is data 1 178: 179: 180: this is data 2 181: 182: 183: this is data 3 184: 185: 186: this is data 4 187: 188: 189: 190: 191: 192: 193: 194: 最简单的flexigrid表格-2 195: 196: 197: 198: 199: col 1 200: 201: 202: col 2 203: 204: 205: col 3 is a long

9、header name 206: 207: 208: col 4 209: 210: 211: 212: 213: 214: 215: this is data 1 with overflowing content 216: 217: 218: this is data 2 219: 220: 221: this is data 3 222: 223: 224: this is data 4 225: 226: 227: 228: 229: this is data 1 230: 231: 232: this is data 2 233: 234: 235: this is data 3 23

10、6: 237: 238: this is data 4 239: 240: 241: 242: 243: this is data 1 244: 245: 246: this is data 2 247: 248: 249: this is data 3 250: 251: 252: this is data 4 253: 254: 255: 256: 257: this is data 1 258: 259: 260: this is data 2 261: 262: 263: this is data 3 264: 265: 266: this is data 4 267: 268: 26

11、9: 270: 271: this is data 1 272: 273: 274: this is data 2 275: 276: 277: this is data 3 278: 279: 280: this is data 4 281: 282: 283: 284: 285: this is data 1 286: 287: 288: this is data 2 289: 290: 291: this is data 3 292: 293: 294: this is data 4 295: 296: 297: 298: 299: this is data 1 300: 301: 30

12、2: this is data 2 303: 304: 305: this is data 3 306: 307: 308: this is data 4 309: 310: 311: 312: 313: this is data 1 314: 315: 316: this is data 2 317: 318: 319: this is data 3 320: 321: 322: this is data 4 323: 324: 325: 326: 327: this is data 1 328: 329: 330: this is data 2 331: 332: 333: this is

13、 data 3 334: 335: 336: this is data 4 337: 338: 339: 340: 341: this is data 1 342: 343: 344: this is data 2 345: 346: 347: this is data 3 348: 349: 350: this is data 4 351: 352: 353: 354: 355: this is data 1 356: 357: 358: this is data 2 359: 360: 361: this is data 3 362: 363: 364: this is data 4 36

14、5: 366: 367: 368: 369: this is data 1 370: 371: 372: this is data 2 373: 374: 375: this is data 3 376: 377: 378: this is data 4 379: 380: 381: 382: 为了增加flexigrid的基本使用效果，我们可以通过参数对其进行基本的调整自定义表头具体代码实现： 1: 2: $(document).ready(function() 3: $(#flexme1).flexigrid( 4: colmodel: 5: display: iso, name: iso,

15、 width: 40, sortable: true, align: center , 6: display: name, name: name, width: 180, sortable: true, align: left , 7: display: printable name, name: printable_name, width: 120, sortable: true, align: left , 8: display: iso3, name: iso3, width: 130, sortable: true, align: left, hide: true , 9: displ

16、ay: number code, name: numcode, width: 80, sortable: true, align: right 10: 11: ); 12: $(#flexme2).flexigrid( 13: colmodel: 14: display: iso, name: iso, width: 40, sortable: true, align: center , 15: display: name, name: name, width: 180, sortable: true, align: left , 16: display: printable name, na

17、me: printable_name, width: 120, sortable: true, align: left , 17: display: iso3, name: iso3, width: 130, sortable: true, align: left, hide: true , 18: display: number code, name: numcode, width: 80, sortable: true, align: right 19: , 20: sortname: iso, 21: sortorder: asc, 22: 23: ); 24: ); 25: 自定义折叠

18、，自定义排序的实现 1: 2: $(document).ready(function() 3: $(#flexme1).flexigrid( 4: colmodel: 5: display: iso, name: iso, width: 40, sortable: true, align: center , 6: display: name, name: name, width: 180, sortable: true, align: left , 7: display: printable name, name: printable_name, width: 120, sortable: t

19、rue, align: left , 8: display: iso3, name: iso3, width: 130, sortable: true, align: left, hide: true , 9: display: number code, name: numcode, width: 80, sortable: true, align: right 10: , width: 700, height: 300, usepager: true, showtabletogglebtn: true, title: 点我折叠 11: ); 12: $(#flexme2).flexigrid

20、( 13: colmodel: 14: display: iso, name: iso, width: 40, sortable: true, align: center , 15: display: name, name: name, width: 180, sortable: true, align: left , 16: display: printable name, name: printable_name, width: 120, sortable: true, align: left , 17: display: iso3, name: iso3, width: 130, sor

21、table: true, align: left, hide: true , 18: display: number code, name: numcode, width: 80, sortable: true, align: right 19: , 20: searchitems: 21: display: iso, name: iso , 22: display: name, name: name, isdefault: true 23: , 24: sortname: iso, 25: sortorder: asc, 26: title: 我的测试效果, 27: width: 700,

22、28: height: 300, 29: usepager: true, showtabletogglebtn: true, rp: 10 30: 31: ); 32: ); 33: 高级使用： 1 分页要用到的存储过程 1: create procedure dbo.spall_returnrows 2: ( 3: sql nvarchar(4000), 4: page int, 5: recsperpage int, 6: id varchar(255), 7: sort varchar(255) 8: ) 9: as 10: 11: declare str nvarchar(4000)

23、12: 13: set str=select top + 14: cast(recsperpage as varchar(20)+ 15: * from (+sql+) t where t.+ 16: id+ 17: not in (select top + 18: cast(recsperpage*(page-1) as varchar(20)+ 19: + 20: id+ 21: from ( 22: +sql+ 23: ) t9 order by + 24: sort+ 25: ) order by + 26: sort 27: 28: print str 29: 30: exec sp

24、_executesql str 2 异步json数据传输实现 1: using system; 2: using system.collections.generic; 3: using system.configuration; 4: using system.data; 5: using system.data.sqlclient; 6: using system.linq; 7: using system.text; 8: using system.web; 9: using system.web.services; 10: using newtonsoft.json; 11: 12:

25、namespace griddemo 13: 14: / 15: / $codebehindclassname$ 的摘要说明 16: / 17: webservice(namespace = /) 18: webservicebinding(conformsto = wsiprofiles.basicprofile1_1) 19: public class getdatasource4 : ihttphandler 20: 21: 22: public void processrequest(httpcontext context) 23: 24: conte

26、xt.response.contenttype = text/plain; 25: 26: /得到当前页 27: string currentpage = context.requestpage; 28: /得到每页显示多少 29: string pageshowlimit = context.requestrp; 30: /得到主键 31: string tableid = context.requestsortname; 32: /得到排序方法 33: string ordermethod = context.requestsortorder; 34: 35: /得到要过滤的字段 36:

27、string filterfield = context.requestqtype; 37: /得到要过滤的内容 38: string filterfieldcontext; 39: if (context.request.formletter_pressed = null) 40: 41: filterfieldcontext = ; 42: 43: else 44: 45: filterfieldcontext = context.requestletter_pressed; 46: 47: /得到表的总行数 48: string tablerowcount = sqlhelper.exe

28、cutescalar(configurationmanager.appsettingssql2, 49: commandtype.text, 50: select count(*) from person.address 51: ).tostring(); 52: /得到主sql 53: sqlparameter sql = new sqlparameter(sql, sqldbtype.nvarchar); 54: /sql.value = select * from person.address; 55: if (filterfieldcontext.length = 0 | filterfield.length = 0) 56: 57: sql.value = select addressid,addre