Mikel
[转载]封装jQuery表格插件jqGrid，控件化jqGrid（一）：显示 – 黑曜石 – 博客园.
先上完结后效果图（点击放大）:
功能：排序，列宽拖拉，自动行号，添加，编辑，删除，查询等
只要在页面中引入：JQuery.js及
<AllenJqGrid:JqGrid ID=”MyJqGrid” runat=”server” TableName=”diamond” Search=”true” Add=”true” Edit=”true” Del=”true” />
这么一段，上图就将呈现在浏览器中。
注：本控件数据提供仅使用json。
写在前面的，为何要控件化
这里http://www.trirand.com/jqgrid/jqgrid.html是 官方的jqGrid Demo页。
其基本的页面JS如下：
jQuery("#list2").jqGrid({
url:'server.php?q=2',
datatype: "json",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name asc, invdate', width:100},
{name:'amount',index:'amount', width:80, align:"right"},
{name:'tax',index:'tax', width:80, align:"right"},
{name:'total',index:'total', width:80,align:"right"},
{name:'note',index:'note', width:150, sortable:false}
],
rowNum:10,
rowList:[10,20,30],
pager: '#pager2',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"JSON Example"
});
jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
这只是基本的配置就有这么多，用过的人应该会知道jqGrid有很丰富的API，但常用的其实也就那么几个，值也差不多。
我在一个项目中的表格大部分都是使用jqGrid实现，大部分时候都是Ctrl+C，然后Ctrl+V，最后改改。
改改的时候经常就会发生默名的错误，基本上找了半天，发现就是少了个逗号或JSON出问题之类。
所以为了不复制粘贴，不重复的设置各项功能及其服务器对应的功能代码，控件化有必要。
控件制作正式开始
一，文件准备：
开个项目，ASP.NET服务器控件，这里命名为AspJqGrid，VS2010会自动生成一个cs控件文件，留下
protected override void RenderContents(HtmlTextWriter output)，用于输出控件
接下来，将jqGrid需要的文件接入项目
新建文件夹Css，将ui.jqgrid.css复制进去
新建文件夹Script，将grid.locale-cn.js和JQuery.jqGrid.min.js复制进去，前一个文件用于本地化，也是 不可缺的
为使用系统资源，调整复制进来的三个文件的属性，如图：
另外在Properties中的AssemblyInfo.cs中声明如下：
[assembly: WebResource(“AspJqGrid.Css.ui.jqgrid.css”, “text/css”)]
[assembly: WebResource(“AspJqGrid.Scripts.grid.locale-cn.js”, “application/x-JavaScript”, PerformSubstitution = true)]
[assembly: WebResource(“AspJqGrid.Scripts.JQuery.jqGrid.min.js”, “application/x-JavaScript”, PerformSubstitution = true)]
这样，文件类的资源准备完毕。
二，编码控件主体：
1）根据jqGrid表体的各项参数，设置参数
如：参数_rowNum声明，其它的_sortname,_sortorder,_rowList等都一样
//每页显示行数默认50 private int _rowNum = 50; [Description("每页显示行数")] public int RowNum { get { return _rowNum; } set { _rowNum = value; } }
2）在控件输出之前，需要向页面输出一些必要的文件资源
protected override void OnPreRender(EventArgs e) { this.Page.PreRenderComplete += new EventHandler(Page_PreRenderComplete); base.OnPreRender(e); } //向页面注册css和js void Page_PreRenderComplete(object sender, EventArgs e) { HtmlLink jqGridStyle = new HtmlLink(); jqGridStyle.Attributes["type"] = "text/css"; jqGridStyle.Attributes["rel"] = "stylesheet"; jqGridStyle.Attributes["href"] = this.Page.ClientScript.GetWebResourceUrl(this.GetType(), "AspJqGrid.Css.ui.jqgrid.css"); this.Page.Header.Controls.Add(jqGridStyle); this.Page.ClientScript.RegisterClientScriptResource(this.GetType(), "AspJqGrid.Scripts.grid.locale-cn.js"); this.Page.ClientScript.RegisterClientScriptResource(this.GetType(), "AspJqGrid.Scripts.jquery.jqGrid.min.js"); }
3）构造控件输出到页面的JS，使用StringBuilder，将第一步的各参数融入，以下是部分
StringBuilder sb = new StringBuilder(); sb.Append("\n<script type=\"text/javascript\">\n"); sb.Append("$(function(){\n"); //-----------------------------------------------jqGrid js构1造ì开a始? sb.Append("$(\"#" + this.ID + "Table\").jqGrid({\n"); sb.Append("url:\"data.ashx?tablename=" + TableName + "&action=view\",\n"); sb.Append("datatype: 'json',\n"); //此?处鋦原-为adataType，?则ò无T法ぁ?处鋦理え?数簓据Y状痢?态?，?大洙?小?写′敏?感D sb.Append("rowNum: " + RowNum + ",\n"); sb.Append("pager: '#" + this.ID + "Pager',\n"); sb.Append("sortname: '" + Sortname + "',\n"); sb.Append("sortorder: '" + Sortorder + "',\n");
其中页面构造最复杂的是colModel，这里使用XML文件配置colModel，为此需要新建类，用于自动生成基本的XML配置文件。
新建一个表体列属性的model类，命名为jqGridColumns
包含属性：
private string columnName;
private int columnSize;
private string dataType;
private bool isIdentity = false;
private List<jqGridColumns> jqGridColumnsList = new List<jqGridColumns>();
新建一个配置文件生成类，命名为jqGridColumnsConfig
包含两个方法：
public List<jqGridColumns> GetColumnsList(string fields, string tableName)
其核心为使用SQLDataReader的GetSchemaTable方法，获得表体的列属性
public void BuildColModelXML(string xmlDocPath,string fields,string tableName)
使用第一个方法后得到表体的列属性，生成colModel的XML配置文件，包含基本的colModel API，完成colModel配置文件的自动生成。
接下来继续主体控件输入JS编程，决断是否存在配置文件，否则使用上述提供的方法，自动生成colModel的配置文件
然后读取XML配置文件，以colModel格式输出JS。
4）最后输出控件，包含页面JS和表体框架
protected override void RenderContents(HtmlTextWriter output) { string jqGridTag = "\n<table id=\"" + this.ID + "Table\"></table>\n<div id=\"" + this.ID + "Pager\"></div>"; output.Write(BuildJqGridHtml() + jqGridTag); }
至些，完成控件主体编码工作，下一篇完成为jqGrid提供数据的类
