封裝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提供資料的類