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');
}

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了。