Easyui datagrid 动态生成列

时间:13-07-13 栏目:EasyUI 作者:zongyan86 评论:0 点击: 13,778 次

本文标签：

原文地址：http://www.cnblogs.com/szytwo/archive/2013/05/19/3086552.html

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

web开发分享



声明: 本文由( zongyan86 )原创编译，转载请保留链接: Easyui datagrid 动态生成列

热门标签

关注我们