easyui datagrid+ashx實現動態生成列

easyui datagrid查詢時需要動態生成列,網上收集瞭一些資料,最終實現和大傢分享一下:

JS腳本:

[javascript]
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代碼:

[csharp]
<%@ 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瞭。

 

發佈留言