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');
}
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;
}
}
}
效果如下:
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了。