Easyui datagrid+ashx 实现动态生成列
easyui datagrid查询时需要动态生成列，网上收集了一些资料，最终实现和大家分享一下：
JS脚本：
var grid; $(function(){ grid = $('#tt').datagrid({ fit: true,//自动大小 rownumbers:true,//行号 //loadMsg:'数据装载中......', singleSelect:true,//单行选取 pagination:false,//显示分页 columns:[[]], toolbar:[{ text:'显示1', iconCls:'icon-add', handler:newData },'-',{ text:'显示2', iconCls:'icon-add', handler:newData2 }] }); self.parent.$("#tabs").tabs("loaded"); }); function newData(){ $.post('ashx/freeBedHandler.ashx', { id:1 }, function(data) { grid.datagrid({ columns:[data.columns] }).datagrid("loadData", data); }, 'json'); } function newData2(){ $.post('ashx/freeBedHandler.ashx', { id:2}, function(data) { grid.datagrid({ columns:[data.columns] }).datagrid("loadData", data); }, 'json'); } var grid; $(function(){ grid = $('#tt').datagrid({ fit: true,//自动大小 rownumbers:true,//行号 //loadMsg:'数据装载中......', singleSelect:true,//单行选取 pagination:false,//显示分页 columns:[[]], toolbar:[{ text:'显示1', iconCls:'icon-add', handler:newData },'-',{ text:'显示2', iconCls:'icon-add', handler:newData2 }] }); self.parent.$("#tabs").tabs("loaded"); }); function newData(){ $.post('ashx/freeBedHandler.ashx', { id:1 }, function(data) { grid.datagrid({ columns:[data.columns] }).datagrid("loadData", data); }, 'json'); } function newData2(){ $.post('ashx/freeBedHandler.ashx', { id:2}, function(data) { grid.datagrid({ columns:[data.columns] }).datagrid("loadData", data); }, 'json'); }
ahsx代码：
<%@ WebHandler Language="C#" Class="freeBedHandler" %> using System; using System.Web; using System.Text; using System.Data; using System.Web.UI.WebControls; using System.Web.SessionState; using Newtonsoft.Json; using Newtonsoft.Json.Converters; using System.Collections; public class freeBedHandler : IHttpHandler { public void ProcessRequest (HttpContext context) {//示例用，各位可以根据自己需求写 var id = context.Request["id"]; if (id.ToString().Equals("1")) { DataTable dt = createTable(); DataRow dr = dt.NewRow(); dr["field"] = "building_id"; dr["title"] = "公寓编号"; dr["align"] = "center"; dr["width"] = 100; dt.Rows.Add(dr); dr = dt.NewRow(); dr["field"] = "building_name"; dr["title"] = "公寓名称"; dr["align"] = "center"; dr["width"] = 100; dt.Rows.Add(dr); dr = dt.NewRow(); dr["field"] = "building_info"; dr["title"] = "公寓信息"; dr["align"] = "center"; dr["width"] = 100; dt.Rows.Add(dr); dr = dt.NewRow(); dr["field"] = "school_area"; dr["title"] = "所在校区"; dr["align"] = "center"; dr["width"] = 100; dt.Rows.Add(dr); string sql = "select building_id,building_name,building_info,school_area from building"; string countsql = "select count(*) from building"; int count = DBHelper.GetScalar(countsql); DataTable dtt = DBHelper.GetDataSet(sql); Hashtable ht = new Hashtable(); ht.Add("total", count); ht.Add("columns", dt); ht.Add("rows", dtt); string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(ht); context.Response.Clear(); context.Response.ContentEncoding = Encoding.UTF8; context.Response.ContentType = "application/json"; context.Response.Write(strJson); context.Response.Flush(); context.Response.End(); } else { DataTable dt = createTable(); DataRow dr = dt.NewRow(); dr["field"] = "building_id"; dr["title"] = "公寓编号"; dr["align"] = "center"; dr["width"] = 100; dt.Rows.Add(dr); dr = dt.NewRow(); dr["field"] = "building_name"; dr["title"] = "公寓名称"; dr["align"] = "center"; dr["width"] = 100; dt.Rows.Add(dr); dr = dt.NewRow(); dr["field"] = "school_area"; dr["title"] = "所在校区"; dr["align"] = "center"; dr["width"] = 100; dt.Rows.Add(dr); string sql = "select building_id,building_name,school_area from building"; string countsql = "select count(*) from building"; int count = DBHelper.GetScalar(countsql); DataTable dtt = DBHelper.GetDataSet(sql); Hashtable ht = new Hashtable(); ht.Add("total", count); ht.Add("columns", dt); ht.Add("rows", dtt); string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(ht); context.Response.Clear(); context.Response.ContentEncoding = Encoding.UTF8; context.Response.ContentType = "application/json"; context.Response.Write(strJson); context.Response.Flush(); context.Response.End(); } } public DataTable createTable() { DataTable dt = new DataTable("myTable"); //field列 DataColumn columnField = new DataColumn();//创建一列 columnField.DataType = System.Type.GetType("System.String");//数据类型 columnField.ColumnName = "field";//列名 dt.Columns.Add(columnField);//添加到table //title列 DataColumn columnTitle = new DataColumn(); columnTitle.DataType = System.Type.GetType("System.String"); columnTitle.ColumnName = "title"; dt.Columns.Add(columnTitle); //align列 DataColumn columnAlign = new DataColumn(); columnAlign.DataType = System.Type.GetType("System.String"); columnAlign.ColumnName = "align"; dt.Columns.Add(columnAlign); //width列 DataColumn columnWidth = new DataColumn(); columnWidth.DataType = System.Type.GetType("System.Int32"); columnWidth.ColumnName = "width"; dt.Columns.Add(columnWidth); return dt; } public bool IsReusable { get { return false; } } }
<%@ WebHandler Language="C#" Class="freeBedHandler" %> using System; using System.Web; using System.Text; using System.Data; using System.Web.UI.WebControls; using System.Web.SessionState; using Newtonsoft.Json; using Newtonsoft.Json.Converters; using System.Collections; public class freeBedHandler : IHttpHandler { public void ProcessRequest (HttpContext context) {//示例用，各位可以根据自己需求写 var id = context.Request["id"]; if (id.ToString().Equals("1")) { DataTable dt = createTable(); DataRow dr = dt.NewRow(); dr["field"] = "building_id"; dr["title"] = "公寓编号"; dr["align"] = "center"; dr["width"] = 100; dt.Rows.Add(dr); dr = dt.NewRow(); dr["field"] = "building_name"; dr["title"] = "公寓名称"; dr["align"] = "center"; dr["width"] = 100; dt.Rows.Add(dr); dr = dt.NewRow(); dr["field"] = "building_info"; dr["title"] = "公寓信息"; dr["align"] = "center"; dr["width"] = 100; dt.Rows.Add(dr); dr = dt.NewRow(); dr["field"] = "school_area"; dr["title"] = "所在校区"; dr["align"] = "center"; dr["width"] = 100; dt.Rows.Add(dr); string sql = "select building_id,building_name,building_info,school_area from building"; string countsql = "select count(*) from building"; int count = DBHelper.GetScalar(countsql); DataTable dtt = DBHelper.GetDataSet(sql); Hashtable ht = new Hashtable(); ht.Add("total", count); ht.Add("columns", dt); ht.Add("rows", dtt); string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(ht); context.Response.Clear(); context.Response.ContentEncoding = Encoding.UTF8; context.Response.ContentType = "application/json"; context.Response.Write(strJson); context.Response.Flush(); context.Response.End(); } else { DataTable dt = createTable(); DataRow dr = dt.NewRow(); dr["field"] = "building_id"; dr["title"] = "公寓编号"; dr["align"] = "center"; dr["width"] = 100; dt.Rows.Add(dr); dr = dt.NewRow(); dr["field"] = "building_name"; dr["title"] = "公寓名称"; dr["align"] = "center"; dr["width"] = 100; dt.Rows.Add(dr); dr = dt.NewRow(); dr["field"] = "school_area"; dr["title"] = "所在校区"; dr["align"] = "center"; dr["width"] = 100; dt.Rows.Add(dr); string sql = "select building_id,building_name,school_area from building"; string countsql = "select count(*) from building"; int count = DBHelper.GetScalar(countsql); DataTable dtt = DBHelper.GetDataSet(sql); Hashtable ht = new Hashtable(); ht.Add("total", count); ht.Add("columns", dt); ht.Add("rows", dtt); string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(ht); context.Response.Clear(); context.Response.ContentEncoding = Encoding.UTF8; context.Response.ContentType = "application/json"; context.Response.Write(strJson); context.Response.Flush(); context.Response.End(); } } public DataTable createTable() { DataTable dt = new DataTable("myTable"); //field列 DataColumn columnField = new DataColumn();//创建一列 columnField.DataType = System.Type.GetType("System.String");//数据类型 columnField.ColumnName = "field";//列名 dt.Columns.Add(columnField);//添加到table //title列 DataColumn columnTitle = new DataColumn(); columnTitle.DataType = System.Type.GetType("System.String"); columnTitle.ColumnName = "title"; dt.Columns.Add(columnTitle); //align列 DataColumn columnAlign = new DataColumn(); columnAlign.DataType = System.Type.GetType("System.String"); columnAlign.ColumnName = "align"; dt.Columns.Add(columnAlign); //width列 DataColumn columnWidth = new DataColumn(); columnWidth.DataType = System.Type.GetType("System.Int32"); columnWidth.ColumnName = "width"; dt.Columns.Add(columnWidth); return dt; } public bool IsReusable { get { return false; } } }
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了。
