Jquery easyUI datagrid 服务器端动态生成列配置返回到前台显示

前台JS代码：

[javascript] view plain copy print ?

1. //查询方法 
2. function query() { 
3.     var params = getParam(); 
4.     if (params.strStnm == undefined || params.strStnm == '' || params.strStnm == '请选择站点') { 
5.         $.messager.alert("提示", "请先选择站点", "warning", null); 
6.         return; 
7.     } 
8.     var url = "MultidropRain.aspx"; 
9.     $.post(url, params,showGrid, "json"); 
10. } 
11. //处理返回结果，并显示数据表格 
12. function showGrid(data) { 
13.     if (data.data[0].rows.length == 0) { 
14.         $.messager.alert("结果", "没有数据!", "info", null); 
15.     } 
16.     var options = { 
17.         width: "auto", 
18.         height: "auto", 
19.         rownumbers: true 
20.     }; 
21.     options.columns = eval(data.columns);//把返回的数组字符串转为对象，并赋于datagrid的column属性 
22.     var dataGrid = $("#rainGrid"); 
23.     dataGrid.datagrid(options);//根据配置选项，生成datagrid 
24.     dataGrid.datagrid("loadData", data.data[0].rows); //载入本地json格式的数据 
25. } 

//查询方法
function query() {
    var params = getParam();
    if (params.strStnm == undefined || params.strStnm == '' || params.strStnm == '请选择站点') {
        $.messager.alert("提示", "请先选择站点", "warning", null);
        return;
    }
    var url = "MultidropRain.aspx";
    $.post(url, params,showGrid, "json");
}
//处理返回结果，并显示数据表格
function showGrid(data) {
    if (data.data[0].rows.length == 0) {
        $.messager.alert("结果", "没有数据!", "info", null);
    }
    var options = {
        width: "auto",
        height: "auto",
        rownumbers: true
    };
    options.columns = eval(data.columns);//把返回的数组字符串转为对象，并赋于datagrid的column属性
    var dataGrid = $("#rainGrid");
    dataGrid.datagrid(options);//根据配置选项，生成datagrid
    dataGrid.datagrid("loadData", data.data[0].rows); //载入本地json格式的数据
}

后台生成columns的方法：

[csharp] view plain copy print ?

1. /// <summary> 
2.    /// 从dataTable创建 jquery easyui datagrid格式的columns参数 
3.    /// </summary> 
4.    /// <param name="dt"></param> 
5.    /// <returns></returns> 
6.    protected string CreateDataGridColumnModel(DataTable dt) 
7.    { 
8.        StringBuilder columns = new StringBuilder("[["); 
9.        int width = 0; 
10.        foreach (DataColumn col in dt.Columns) 
11.        { 
12.            //控制列的宽度 第一列日期宽度为139,其余列为列名的汉字长度*20px 
13.            if (col.ColumnName=="日期") 
14.            { 
15.                width = 139; 
16.            } 
17.            else 
18.            { 
19.                width = col.ColumnName.Length * 20; 
20.            } 
21.            columns.AppendFormat("{{field:'{0}',title:'{1}',align:'center',width:{2}}},",col.ColumnName,col.ColumnName,width); 
22.        } 
23.        if (dt.Columns.Count>0) 
24.        { 
25.            columns.Remove(columns.Length - 1, 1);//去除多余的','号 
26.        } 
27.        columns.Append("]]"); 
28.        return columns.ToString(); 
29.    } 

 /// <summary>
    /// 从dataTable创建 jquery easyui datagrid格式的columns参数
    /// </summary>
    /// <param name="dt"></param>
    /// <returns></returns>
    protected string CreateDataGridColumnModel(DataTable dt)
    {
        StringBuilder columns = new StringBuilder("[[");
        int width = 0;
        foreach (DataColumn col in dt.Columns)
        {
            //控制列的宽度 第一列日期宽度为139,其余列为列名的汉字长度*20px
            if (col.ColumnName=="日期")
            {
                width = 139;
            }
            else
            {
                width = col.ColumnName.Length * 20;
            }
            columns.AppendFormat("{{field:'{0}',title:'{1}',align:'center',width:{2}}},",col.ColumnName,col.ColumnName,width);
        }
        if (dt.Columns.Count>0)
        {
            columns.Remove(columns.Length - 1, 1);//去除多余的','号
        }
        columns.Append("]]");
        return columns.ToString();
    }

后台返回的JSON字符串：

[html] view plain copy print ?

1. {"columns":"[[{field:'日期',title:'日期',align:'center',width:139},{field:'乔河',title:'乔河',align:'center',width:40},{field:'城壕',title:'城壕',align:'center',width:40},{field:'墩山',title:'墩山',align:'center',width:40}]]","data":[{"page":"0","total":"12","rows":[{"日期":"2011-12-12 20时","乔河":"56.00","城壕":"","墩山":""},{"日期":"2012-02-07 15时","乔河":"54.00","城壕":"","墩山":""},{"日期":"2012-02-08 09时","乔河":"51.00","城壕":"","墩山":""},{"日期":"2012-02-09 10时","乔河":"","城壕":"53.00","墩山":""},{"日期":"2012-02-09 15时","乔河":"","城壕":"","墩山":"54.00"},{"日期":"2012-02-09 15时","乔河":"","城壕":"","墩山":""},{"日期":"2012-02-09 16时","乔河":"","城壕":"","墩山":""},{"日期":"2012-02-13 16时","乔河":"","城壕":"","墩山":""},{"日期":"2012-02-13 16时","乔河":"","城壕":"","墩山":""},{"日期":"2012-02-14 13时","乔河":"","城壕":"","墩山":""},{"日期":"2012-02-15 09时","乔河":"","城壕":"","墩山":""},{"日期":"2012-02-16 13时","乔河":"","城壕":"","墩山":""}]}]} 

{"columns":"[[{field:'日期',title:'日期',align:'center',width:139},{field:'乔河',title:'乔河',align:'center',width:40},{field:'城壕',title:'城壕',align:'center',width:40},{field:'墩山',title:'墩山',align:'center',width:40}]]","data":[{"page":"0","total":"12","rows":[{"日期":"2011-12-12 20时","乔河":"56.00","城壕":"","墩山":""},{"日期":"2012-02-07 15时","乔河":"54.00","城壕":"","墩山":""},{"日期":"2012-02-08 09时","乔河":"51.00","城壕":"","墩山":""},{"日期":"2012-02-09 10时","乔河":"","城壕":"53.00","墩山":""},{"日期":"2012-02-09 15时","乔河":"","城壕":"","墩山":"54.00"},{"日期":"2012-02-09 15时","乔河":"","城壕":"","墩山":""},{"日期":"2012-02-09 16时","乔河":"","城壕":"","墩山":""},{"日期":"2012-02-13 16时","乔河":"","城壕":"","墩山":""},{"日期":"2012-02-13 16时","乔河":"","城壕":"","墩山":""},{"日期":"2012-02-14 13时","乔河":"","城壕":"","墩山":""},{"日期":"2012-02-15 09时","乔河":"","城壕":"","墩山":""},{"日期":"2012-02-16 13时","乔河":"","城壕":"","墩山":""}]}]}

格式： { "columns":"[[ {field:'field1','title':'title1'},{...} ]]",data:[{page:"pageIndex",total:"totalNum",rows:[{name1:value,name2:value},{...}]}]}
特别注意JSON格式：由于刚开始返回的json格式不对，回调函数怎么都不能调用。着实郁闷了很久。对于自己后台拼json的同学，请务必注意json格式问题。

data数组里面放的是 datagrid要求的标准json格式