最近Extjs真的很美。只要是CRM/HRM公司，现在都在思考如何在项目中使用，但我不敢，原因很简单：太大/太蠢/源代码不容易调试。但是Extjs漂亮的形式和强大的功能真的让我垂涎三尺。记得之前有个老外写了一个类似Extjs的Jquery插件，于是我就在Jquery插件的海洋里搜索。呵呵，真的找到了。看来我的Jquery还是不错的。它小巧简单，就像一台好的汽车发动机。想要什么都可以自己动手做，真的很方便。整体方案在网络传输上不超过80KB，速度远低于500KB大小的Extjs。

下载地址：http://code.google.com/p/flexigrid/.

然而，由于FlexiGrid在互联网上的大部分信息都是用PHP或java编写的，我哥干脆对其进行了改造，实现了一个山寨版的Extjs表单，希望对大家有所帮助。

基本用途：

1基本使用很简单，只需添加FlexiGrid的Jquery库和JS来格式化美化表格。

复制的代码如下：Link rel='样式表' type=' text/CSS ' href=' CSS/flexi grid . CSS ' script type=' text/JavaScript ' src=' http : lib/jquery/jquery-1 . 2 . 6 . min . js '/script script type=' text/JavaScript ' src=' http : flexi grid . pack . js '/script %-script type=' text/JavaScript ' srcready(function() { $('#flexme1 '))。flexi grid()；$('#flexme2 ')。flexi grid()；});/script

2添加要格式化的表格。

复制代码代码如下：h1最简单的柔性网格表格-1/h1表id='flexme1 '第一列宽度='100 '第一列/第10列宽度='100 '第2列/第10列宽度='100 '第3列是一个长标题名/第10行宽度='300 '第四列/第10行/第10行/第10行/第11行这是溢出内容的数据1 /td这是数据2 TD/TD这是数据3 /td这是数据4 TD/tr这是数据1/TD这是数据2 /td这是TD /td这是数据4 TD/tr这是数据1 TD/TD这是数据2 TD/TD这是数据3 /td这是数据4 TD/tr这是数据1 /td这是数据2 /td这是数据3 /td这是数据3 /td这是数据4 TD/tr这是数据1 /td这是数据2 /td这是数据3/TD这是推倒（网络用词）这是数据4 TD/tr这是数据1 TD/TD这是数据2 TD/TD这是数据3 /td这是数据4 TD/tr这是数据1 /td这是数据2 /td这是数据3 /td这是数据3 /td这是数据4 TD/tr这是数据1 /td这是数据2 /td这是数据3/TD这是数据4 TD/tr这是数据1 TD/TD这是数据2 TD/TD这是数据3 TD/TD这是数据4 TD/tr这是数据1 /td这是数据2 /td这是数据3 /td这是数据4 TD/tr这是数据1 /td这是数据2 /td这是数据3 /td这是数据4 TD/tr这是数据1 /td这是数据2 /td这是数据3 /td这是数据4 TD/tr/t body/tablep/ph1最简单的柔性网格表格-2/h1表id='flexme2 '第一列宽度='100 '第一列/第10列宽度='100 '第2列/第10列宽度='100 '第3列是一个长标题名/第10列宽度='300 '第四列/第10列/tr/第一列这是溢出内容的数据1/TD这是数据2 /td这是数据3 TD/TD这是数据4 TD/tr这是数据1 TD/TD这是数据2 /td这是数据3 /td这是数据4 TD/tr这是数据1 /td这是数据2 /td这是数据3 /td这是数据3 /td这是数据4 TD/tr这是数据1 /td这是数据2 /td这是数据3/TD这是数据4 TD/tr这是数据1 TD/TD这是数据2 TD/TD这是数据3 /td这是数据4 TD/tr这是数据1 /td这是数据2 /td这是数据3 /td这是数据4 TD/tr这是数据1 /td这是数据2 /td这是数据3 /td这是数据4 TD/tr/tr TD这是数据1 TD/TD这是数据2 TD/TD这是数据3 /td这是数据4 TD/tr这是数据1 /td这是数据2 /td这是数据3 /td这是数据4 TD/tr这是数据1 /td这是数据2 /td这是数据3 /td这是数据4 TD/tr这是数据1 /td这是数据2 /td这是数据3 /td这是数据4 TD/tr这是数据1 /td这是数据2 /td这是数据3 /td这是数据4 TD/tr/t body/table

为了增加灵活网格的基本使用效果，我们可以通过参数对其进行基本的调整

自定义表头

具体代码实现：

复制代码代码如下：脚本类型=' text/JavaScript ' $(' document ').ready(function() { $('#flexme1 ')).flexi网格({ col model :[{ display : ' ISO '，name: 'iso '，width: 40，sortable: true，align: 'center' }，{ display: 'Name '，name: 'name '，width: 180，sortable: true，align: 'left' }，{ display: ' Printable Name '，Name 33:flexi网格({ col model :[{ display : ' ISO '，name: 'iso '，width: 40，sortable: true，align: 'center' }，{ display: 'Name '，name: 'name '，width: 180，sortable: true，align: 'left' }，{ display: ' Printable Name '，Name 33:/script

自定义折叠，自定义排序的实现

复制代码代码如下：脚本类型=' text/JavaScript ' $(' document ').ready(function() { $('#flexme1 ')).flexi网格({ col model :[{ display : ' ISO '，name: 'iso '，width: 40，sortable: true，align: 'center' }，{ display: 'Name '，name: 'name '，width: 180，sortable: true，align: 'left' }，{ display: ' Printable Name '，Name 33:点我折叠' });$('#flexme2 ').flexi网格({ col model :[{ display : ' ISO '，name: 'iso '，width: 40，sortable: true，align: 'center' }，{ display: 'Name '，name: 'name '，width: 180，sortable: true，align: 'left' }，{ display: ' Printable Name '，Name 33:我的测试效果，宽度： 700，高度： 300，usepager: true，showTableToggleBtn: true，RP : 10 })；});/script

高级使用：

一分页用到的存储过程

复制代码代码如下： create PRocESS[dbo]。[spal _ ReturnRows](@ SQL nVARCHAR(4000)、@Page int、@RecsPerPage int、@ID VARCHAR(255)、@ Sort VARCHAR(255))AS DECLARE @ Str nVARCHAR(4000)SET @ Str=' SELECT TOP ' CAST(@ RecsPerPage AS VARCHAR(20))' * FROM([emailprotected]')T WHERE T . @ ID ' NOT IN(SELECT TOP ' CAST)(@ RecsPerPage *(@ Page-1))AS VARCHAR

2异步数据数据传输实现

复制代码代码如下：使用系统；使用系统。集合。通用；使用系统。配置；使用系统。数据；使用系统数据。SqlClient使用系统Linq .使用系统。文字；使用系统网络.使用系统。网络服务；使用牛顿英尺.Json命名空间GridEmo {///summary///$ code behind类名$的摘要说明////摘要[WebServiCe(NameSpace=' http://tempuri。org/')][WebServiceBinding(CONFOrmSTO=WSiprofiles .base cprofile 1 _ 1)]公共类getdata source 4 : IHttpHandler { public void process request(HttpContext context){ context .响应。内容类型='文本/纯文本；//得到当前页字符串CurrentPage=上下文。请求[' page ']；//得到每页显示多少字符串页面显示限制=上下文。请求[' RP ']；//得到主键字符串TableID=上下文。请求['排序名称']；//得到排序方法字符串OrderMethod=上下文。请求['排序顺序']；//得到要过滤的字段字符串FilterField=上下文。请求[' qtype ']；//得到要过滤的内容字符串FilterFieldContextif(上下文。请求。格式[' letter _ pressed ']==null){ filter field context=' '；} else { FilterFieldContext=context .请求[' letter _ pressed ']；} //得到表的总行数字符串TableRowCount=SqlHelper .执行标量（配置管理器AppSettings['SQL2']，命令类型."文本",从"人员"中选择计数(*)。地址')。ToString()；//得到主SQL SQL参数SqL=新的SqL参数(' @ SqL '，SqlDbType .NVarChar)；//SQL .值='选择*从人。地址；if (FilterFieldContext .长度==0 || FilterField .长度==0) { SQL .值='选择地址标识，地址行1,地址行2,邮政编码，城市发件人。地址；} else { string[] tmp=FilterField .拆分(',');SQL .值='选择地址标识，地址行1,地址行2,邮政编码，城市发件人。地址，其中" tmp[0]"像筛选器字段上下文“%”；} SqlParameter Page=new SqlParameter(' @ Page '，SqlDbType .int)；页面。值=转换. ToInt32(当前页面);SqlParameter RecsPerPage=new SqlParameter(' @ RecsPerPage '，SqlDbType .int)；回收页面。值=转换. ToInt32(页面显示限制);SqlParameter ID=新的SqlParameter(' @ ID '，SqlDbType .VarChar)；身份证值=表参数排序=新的SqlParameter('@Sort '，SqlDbType .VarChar)；算是吧值=表标识//得到表数据表返回表=SqlHelper .执行数据集（配置管理器AppSettings['SQL2']，命令类型.StoredProcedure，' spAll _ ReturnRows '，新的SQL参数[] { SQL，Page，RecsPerPage，ID，Sort }).表[0];语境。响应。写入(dtto 2(returnTable，CurrentPage，TableRowCount))；} ///summary ///JSON格式转换////summary///param name=' dt ' datatable表/param ///param name='page '当前页/param ///param name='total '总计多少行/param///returns/returns public static string dtto 2(DataTable dt，string page，string total){ StringBuilder jsonString=new StringBuilder()；jsonString .AppendLine(“{”)；jsonString .AppendFormat('page: {0}，n '，页);jsonString .AppendFormat('total: {0}，n '，total)；jsonString .AppendLine('行s :[')；for(int I=0；我决定。行。计数；i ) { jsonString .追加(' { ');jsonString .AppendFormat(' id :"{ 0 } "，cell:['，dt .行[i][0].ToString())；for(int j=0；j dt .列。计数；j ) { if (j==dt .列。Count - 1) { jsonString .附录格式(“{ 0 }”)，dt .行[i][j].ToString())；} else { jsonString .AppendFormat(“{ 0 }”，“”，dt .行[i][j].ToString())；} if (j==dt .列。Count - 1) { jsonString .AppendFormat('，' {0} '，'输入类型= '按钮'值= '查看 ' id= ' SSS ' onclick= ' SSS(' dt .行[i][0].ToString()') '/')；} } jsonString .追加(']');if (i==dt .行数。计数- 1) { jsonString .AppendLine(“}”；} else { jsonString .AppendLine('}，')；} } jsonString .追加(']');jsonString .AppendLine(“}”；返回jsonString .ToString()；} public bool IsReuse { get { return false；} } }}

3页面实现

复制代码代码如下：%@页面语言=' c# ' AutoEventWireup=' true '代码在=' Complex-8 '之前。aspx。cs ' Inherits=' gridemo .complex _ 8"%！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。L1-过渡时期。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head runat=' server ' title/title link rel='样式表type=' text/CSS ' href='/CSS/flexi grid/CSS '/script type=' ready(function(){ $(' # flex 1 ')).flexi网格({ URL : ' getdata source 4。ashx '，dataType: 'json '，colModel: [ { display: '地址标识，名称： '地址标识，宽度： 40,可排序：真，对齐： '中心' },{显示： '具体地址1 ',名称： '地址线1 ',宽度： 140,可排序：真的，对齐： '左侧' },{显示： '具体地址2 ',名称： '地址线2 ',宽度： 80,可排序：真的，对齐： '左侧' },{显示： '邮编，名称： '邮政编码'，宽度： 80,可排序：真的，对齐： '左' }，{ display: '城市，名称： '城市'，宽度： 80,可排序：真的，对齐： '左' }，{ display: '操作，名称： 'Opt '，宽度： 80,可排序：真的，对齐： '左' } ]， 按钮： [ { name: 'A '、onpress : sort lpha }、{ name: 'B '、onpress : sort lpha }、{ name: 'C '、onpress : sort lpha }、{ name: 'D '、onpress : sort lpha }、{ name: ' E '、onpress 3: sort lpha } { name: 'N '、onpress : sort lpha }、{ name: 'O '、onpress : sort lpha }、{ name: 'P '、onpress : sort lpha }、{ name: 'Q '、onpress : sort lpha }、{ name: 'R '、on press 3: sort lpha }、{ name 3: sort lpha }城市，名称为： '城市'，是default: true}，{ display: '邮编，名为： 'PostalCode' } ]，usepager: true，title: '客户信息，useRp: true，rp: 10，showTableToggleBtn: true，width: 700，height: 200，rpoptions 3360[10，15，20，25，40，60]，//可选择设定的每页结果数procmsg: '请等待数据正在加载中…', //正在处理的提示信息resizable: false，//是否可伸缩sortname: 'AddressID '，//sortorder: 'asc '，//此列由于存储过程原因无法用}); });函数排序alpha(com){ jQuery(' flex 1 ').柔性版选项({新p : 1，参数：[{ name : ' letter _ pressed '，value: com }，{ name: 'qtype '，value : $(' select[name=qtype])).val()}]})；jQuery('#flex1 ').flexReload()；}函数sss(数据){ var temp=eval(数据);//jquery。面盒(温度)；jquery。面框({ Ajax : '默认值。aspx？id=' temp })}/脚本/头体表/表/体/html