easyui datagrid+ashx实现动态生成列

easyui datagrid查询时需要动态生成列，网上收集了一些资料，最终实现和大家分享一下：

JS脚本：

[javascript] view plaincopy

1. var grid;  
2.   
3. $(function(){  
4.   
5.     grid = $('#tt').datagrid({  
6.         fit: true,//自动大小    
7.         rownumbers:true,//行号   
8.         //loadMsg:'数据装载中......',    
9.         singleSelect:true,//单行选取  
10.         pagination:false,//显示分页  
11.         columns:[[]],  
12.         toolbar:[{  
13.             text:'显示1',  
14.             iconCls:'icon-add',  
15.             handler:newData  
16.         },'-',{  
17.             text:'显示2',  
18.             iconCls:'icon-add',  
19.             handler:newData2  
20.         }]  
21.     });  
22.   
23.     self.parent.$("#tabs").tabs("loaded");  
24. });  
25.   
26. function newData(){  
27.   
28.     $.post('ashx/freeBedHandler.ashx', { id:1 },   
29.         function(data) {  
30.             grid.datagrid({  
31.                 columns:[data.columns]  
32.             }).datagrid("loadData", data);                 
33.         }, 'json');  
34. }  
35.   
36. function newData2(){  
37.   
38.     $.post('ashx/freeBedHandler.ashx', { id:2},   
39.         function(data) {  
40.             grid.datagrid({  
41.                 columns:[data.columns]  
42.             }).datagrid("loadData", data);                 
43.         }, 'json');  
44. }  

ahsx代码：

[csharp] view plaincopy

1. <%@ WebHandler Language="C#" Class="freeBedHandler" %>  
2.   
3. using System;  
4. using System.Web;  
5. using System.Text;  
6. using System.Data;  
7. using System.Web.UI.WebControls;  
8. using System.Web.SessionState;  
9. using Newtonsoft.Json;  
10. using Newtonsoft.Json.Converters;  
11. using System.Collections;  
12.   
13. public class freeBedHandler : IHttpHandler {  
14.       
15.     public void ProcessRequest (HttpContext context) {//示例用，各位可以根据自己需求写  
16.   
17.         var id = context.Request["id"];  
18.         if (id.ToString().Equals("1"))  
19.         {  
20.             DataTable dt = createTable();  
21.   
22.             DataRow dr = dt.NewRow();  
23.             dr["field"] = "building_id";  
24.             dr["title"] = "公寓编号";  
25.             dr["align"] = "center";  
26.             dr["width"] = 100;  
27.             dt.Rows.Add(dr);  
28.   
29.             dr = dt.NewRow();  
30.             dr["field"] = "building_name";  
31.             dr["title"] = "公寓名称";  
32.             dr["align"] = "center";  
33.             dr["width"] = 100;  
34.             dt.Rows.Add(dr);  
35.   
36.             dr = dt.NewRow();  
37.             dr["field"] = "building_info";  
38.             dr["title"] = "公寓信息";  
39.             dr["align"] = "center";  
40.             dr["width"] = 100;  
41.             dt.Rows.Add(dr);  
42.   
43.             dr = dt.NewRow();  
44.             dr["field"] = "school_area";  
45.             dr["title"] = "所在校区";  
46.             dr["align"] = "center";  
47.             dr["width"] = 100;  
48.             dt.Rows.Add(dr);  
49.   
50.             string sql = "select building_id,building_name,building_info,school_area from building";  
51.             string countsql = "select count(*) from building";  
52.             int count = DBHelper.GetScalar(countsql);  
53.             DataTable dtt = DBHelper.GetDataSet(sql);  
54.   
55.             Hashtable ht = new Hashtable();  
56.             ht.Add("total", count);  
57.             ht.Add("columns", dt);  
58.             ht.Add("rows", dtt);  
59.             string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(ht);  
60.   
61.   
62.             context.Response.Clear();  
63.             context.Response.ContentEncoding = Encoding.UTF8;  
64.             context.Response.ContentType = "application/json";  
65.             context.Response.Write(strJson);  
66.             context.Response.Flush();  
67.             context.Response.End();  
68.         }  
69.         else  
70.         {  
71.             DataTable dt = createTable();  
72.   
73.             DataRow dr = dt.NewRow();  
74.             dr["field"] = "building_id";  
75.             dr["title"] = "公寓编号";  
76.             dr["align"] = "center";  
77.             dr["width"] = 100;  
78.             dt.Rows.Add(dr);  
79.   
80.             dr = dt.NewRow();  
81.             dr["field"] = "building_name";  
82.             dr["title"] = "公寓名称";  
83.             dr["align"] = "center";  
84.             dr["width"] = 100;  
85.             dt.Rows.Add(dr);  
86.   
87.             dr = dt.NewRow();  
88.             dr["field"] = "school_area";  
89.             dr["title"] = "所在校区";  
90.             dr["align"] = "center";  
91.             dr["width"] = 100;  
92.             dt.Rows.Add(dr);  
93.   
94.             string sql = "select building_id,building_name,school_area from building";  
95.             string countsql = "select count(*) from building";  
96.             int count = DBHelper.GetScalar(countsql);  
97.             DataTable dtt = DBHelper.GetDataSet(sql);  
98.           
99.   
100.             Hashtable ht = new Hashtable();  
101.             ht.Add("total", count);  
102.             ht.Add("columns", dt);  
103.             ht.Add("rows", dtt);  
104.             string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(ht);  
105.   
106.   
107.             context.Response.Clear();  
108.             context.Response.ContentEncoding = Encoding.UTF8;  
109.             context.Response.ContentType = "application/json";  
110.             context.Response.Write(strJson);  
111.             context.Response.Flush();  
112.             context.Response.End();  
113.         }  
114.           
115.     }  
116.   
117.     public DataTable createTable()  
118.     {  
119.   
120.         DataTable dt = new DataTable("myTable");  
121.   
122.         //field列  
123.         DataColumn columnField = new DataColumn();//创建一列  
124.         columnField.DataType = System.Type.GetType("System.String");//数据类型  
125.         columnField.ColumnName = "field";//列名  
126.         dt.Columns.Add(columnField);//添加到table  
127.         //title列  
128.         DataColumn columnTitle = new DataColumn();  
129.         columnTitle.DataType = System.Type.GetType("System.String");  
130.         columnTitle.ColumnName = "title";  
131.         dt.Columns.Add(columnTitle);  
132.         //align列  
133.         DataColumn columnAlign = new DataColumn();  
134.         columnAlign.DataType = System.Type.GetType("System.String");  
135.         columnAlign.ColumnName = "align";  
136.         dt.Columns.Add(columnAlign);  
137.         //width列  
138.         DataColumn columnWidth = new DataColumn();  
139.         columnWidth.DataType = System.Type.GetType("System.Int32");  
140.         columnWidth.ColumnName = "width";  
141.         dt.Columns.Add(columnWidth);  
142.   
143.         return dt;  
144.     }  
145.       
146.     public bool IsReusable {  
147.         get {  
148.             return false;  
149.         }  
150.     }  
151.   
152. }  

效果如下：

Json数格式如下：

{"total":16,"rows":[{"building_id":"B1","building_name":"1号楼","building_info":"一公寓(女生)","school_area":"小营"},{"building_id":"B2","building_name":"2号楼","building_info":"二公寓(女生)","school_area":"小营"},{"building_id":"B3","building_name":"3号楼","building_info":"三公寓(女生)","school_area":"小营"},{"building_id":"B4-1","building_name":"4-1号楼","building_info":"四公寓(男生)","school_area":"小营"},{"building_id":"B4-2","building_name":"4-2号楼","building_info":"四公寓(女生)","school_area":"小营"},{"building_id":"B5","building_name":"5号楼","building_info":"五公寓(男生)","school_area":"小营"},{"building_id":"B6","building_name":"6号楼","building_info":"六公寓(女生)","school_area":"小营"},{"building_id":"B7","building_name":"七号楼","building_info":"七公寓(女生)","school_area":"小营"},{"building_id":"J1","building_name":"1号楼","building_info":"一公寓(男生) ","school_area":"健翔桥"},{"building_id":"J2-1","building_name":"二公寓","building_info":"二公寓男生","school_area":"健翔桥"},{"building_id":"J2-2","building_name":"三公寓","building_info":"二公寓女生","school_area":"健翔桥"},{"building_id":"J4","building_name":"四公寓","building_info":"四公寓男生","school_area":"健翔桥"},{"building_id":"Q1","building_name":"1号楼","building_info":"一公寓(男生) ","school_area":"清河"},{"building_id":"Q2","building_name":"2号楼","building_info":"二公寓(女生)","school_area":"清河"},{"building_id":"Q3","building_name":"3号楼","building_info":"三公寓(女生) ","school_area":"清河"},{"building_id":"Q4","building_name":"四公寓","building_info":"四公寓男生  ","school_area":"清河"}],"columns":[{"field":"building_id","title":"公寓编号","align":"center","width":100},{"field":"building_name","title":"公寓名称","align":"center","width":100},{"field":"building_info","title":"公寓信息","align":"center","width":100},{"field":"school_area","title":"所在校区","align":"center","width":100}]}

其实主要原理就是后台生成了columns:[]，然后grid.datagrid({columns:[data.columns]})绑定列，就OK了。