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