使用FlexiGrid实现Extjs表格的效果.docx

窗体顶端使用FlexiGrid实现Extjs表格的效果 近一段时间Extjs真的是风光无限好，只要是个做CRM/HRM之类的企业现在都在琢磨怎么在项目中用它，不过兄弟我可是不敢，原因很简单：太大/太笨 /源码不好调试。但是对于Extjs漂亮的表格与功能的强大，实在是让我垂涎三尺，记得以前有个老外同志写过一个类似的Extjs的Jquery插件，所 以就在Jquery的插件海洋中一顿海找，呵呵，还真让我找到了。看来还是我的Jquery好，小巧简单好像一部好的汽车引擎，我想要什么就可以自已 DIY，真是方便。总体方案在网络传输上不超过80KB，速度比500KB大小的Extjs不知道要小上多少哪。有段时间不写东西了，怕说的不清楚。有需要代码的朋友可以访问我的网盘：/shared/khhs7olp1p 下载地址：/p/flexigrid/ 不过由于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(); 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: 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: 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: 107: 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 is 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 170: 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 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 236: 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: 269: 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: 302: 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 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 365: 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, 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: display: 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, name: 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: 自定义折叠，自定义排序的实现 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: true, 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( 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, sortable: 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, 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) 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_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: 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: context.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: 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.ExecuteScalar(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