easyui datagrid 動態列和前端分頁，以及加載Datatable

項目中用到一個執行SQL，展示結果的功能。所以需要動態改變datagrid的列，最好是使用后台分頁，但沒找到方法，所以使用了前端分頁。

后台代碼：

    StringBuilder columns = new StringBuilder("[[");

                foreach (DataColumn col in ds.Tables[0].Columns)
                    columns.AppendFormat("{{field:'{0}',title:'{1}',align:'center',width:{2}}},", col.ColumnName, col.ColumnName, 100);

                if (ds.Tables[0].Columns.Count > 0)
                    columns.Remove(columns.Length - 1, 1);//去除多余的','號  

                columns.Append("]]");

                Dictionary<string, object> objDic = new Dictionary<string, object>();
                objDic.Add("columns", columns.ToString());
                objDic.Add("rows", ds.Tables[0]);

                this.Context.Response.Write(JsonConvert.SerializeObject(new JSON(true, objDic, "")));

JSON是我自定義的一個類，objDic對應其obj屬性。拼接好datagrid需要的列字符串，在前端使用 eval方式轉成對象

   var opt = $(dg).datagrid('options');
                            opt.columns = eval(result.obj.columns); //把返回的數組字符串轉為對象，並賦於datagrid的column屬性   
                            opt.title = "SQL:" + sql;
                            $(dg).datagrid(opt);

只用ado.net查詢出來的DataTable直接序列化是沒有datagrid需要的total和rows兩個屬性的，所以在前端要定義一個對象付給datagrid

    var data = new Object();
                            data.total = result.obj.rows.length;
                            data.rows = result.obj.rows;
                            $(dg).data().datagrid.cache = data;
                            $(dg).datagrid('reload');
                          //  $(dg).datagrid('loadData', result.obj.rows); //這樣是不行的

cache不是datagrid默認的屬性，這里是為了前端分頁自定義的一個數據存儲屬性。調用reload方法時會觸發Datagrid的loader（據說這個屬性在datagrid1.3.1后才有的，我用的就是1.3.1版本）。
下面看看datagrid的初始化代碼:

      //初始化數據列表
        function initDatagrid() {
            /// <summary>初始化數據列表</summary>
            $(dg).datagrid({
                fit: true, border: false, striped: true, pagination: true, checkOnSelect: true, selectOnCheck: true, singleSelect: true, nowrap: true, rownumbers: true,
                title: "數據表:(請選擇)",
                width: 500, height: 350, pageSize: 20, pageList: [10, 20, 30, 40, 50],
                loader: DatagridFrontPageLoader2 //前端分頁
            });
        }

定義了loader屬性，然后看看DatagridFrontPageLoader2里是怎么寫的

/**
* @author 趙保龍
* 
* @requires jQuery
* 
* Datagrid前端分頁加載器,使用 loadData加載數據時使用
*/
function DatagridFrontPageLoader2(param, success, error) {
    var that = $(this);
    var cache = that.data().datagrid.cache;
    if (cache) {
        success(bulidData(cache));
    }
    else {
        return false;
    }

    function bulidData(data) {
        var temp = $.extend({}, data);
        var tempRows = [];
        var start = (param.page - 1) * parseInt(param.rows);
        var end = start + parseInt(param.rows);
        var rows = data.rows;
        for (var i = start; i < end; i++) {
            if (rows[i]) {
                tempRows.push(rows[i]);
            } else {
                break;
            }
        }
        temp.rows = tempRows;
        return temp;
    }
}

首先通過cache屬性獲取所有數據，然后再bulidData函數中選取當前頁需要的數據，傳給success加載。
點擊前端的上一頁、下一頁、刷新等按鈕都會觸發這個處理函數，而不去遠程加載數據。

這個函數式通過修改孫宇的方法而來的，他那個可以到遠程加載數據，不適用與我這的情況所以改了一下。

/**
* @author 孫宇
* 
* @requires jQuery
* 
* Datagrid前端分頁加載器,使用 url加載數據時使用
*/
function DatagridFrontPageLoader(param, success, error) {
    var that = $(this);
    var opts = that.datagrid("options");
    if (!opts.url) {
        return false;
    }

    var cache = that.data().datagrid.cache;
    if (!cache) {
        $.ajax({
            type: opts.method,
            url: opts.url,
            data: param,
            dataType: "json",
            success: function (data) {
                that.data().datagrid['cache'] = data;
                success(bulidData(data));
            },

            error: function () {
                error.apply(this, arguments);
            }
        });

    } else {
        success(bulidData(cache));
    }

    function bulidData(data) {
        var temp = $.extend({}, data);
        var tempRows = [];
        var start = (param.page - 1) * parseInt(param.rows);
        var end = start + parseInt(param.rows);
        var rows = data.rows;
        for (var i = start; i < end; i++) {
            if (rows[i]) {
                tempRows.push(rows[i]);
            } else {
                break;
            }
        }
        temp.rows = tempRows;
        return temp;
    }
}

 

不總結總是會忘，在這記錄一下。。。。。。