Easyui datagrid+ashx 实现动态生成列 - 摩根船长 - 博客园
easyui datagrid查询时需要动态生成列，网上收集了一些资料，最终实现和大家分享一下：
$(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');
$(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.W
using System.T
using System.D
using System.Web.UI.WebC
using System.Web.SessionS
using Newtonsoft.J
using Newtonsoft.Json.C
using System.C
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();
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");
DataColumn columnField = new DataColumn();//创建一列
columnField.DataType = System.Type.GetType("System.String");//数据类型
columnField.ColumnName = "field";//列名
dt.Columns.Add(columnField);//添加到table
DataColumn columnTitle = new DataColumn();
columnTitle.DataType = System.Type.GetType("System.String");
columnTitle.ColumnName = "title";
dt.Columns.Add(columnTitle);
DataColumn columnAlign = new DataColumn();
columnAlign.DataType = System.Type.GetType("System.String");
columnAlign.ColumnName = "align";
dt.Columns.Add(columnAlign);
DataColumn columnWidth = new DataColumn();
columnWidth.DataType = System.Type.GetType("System.Int32");
columnWidth.ColumnName = "width";
dt.Columns.Add(columnWidth);
public bool IsReusable {
return false;
&%@ WebHandler Language="C#" Class="freeBedHandler" %&
using System.W
using System.T
using System.D
using System.Web.UI.WebC
using System.Web.SessionS
using Newtonsoft.J
using Newtonsoft.Json.C
using System.C
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();
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");
DataColumn columnField = new DataColumn();//创建一列
columnField.DataType = System.Type.GetType("System.String");//数据类型
columnField.ColumnName = "field";//列名
dt.Columns.Add(columnField);//添加到table
DataColumn columnTitle = new DataColumn();
columnTitle.DataType = System.Type.GetType("System.String");
columnTitle.ColumnName = "title";
dt.Columns.Add(columnTitle);
DataColumn columnAlign = new DataColumn();
columnAlign.DataType = System.Type.GetType("System.String");
columnAlign.ColumnName = "align";
dt.Columns.Add(columnAlign);
DataColumn columnWidth = new DataColumn();
columnWidth.DataType = System.Type.GetType("System.Int32");
columnWidth.ColumnName = "width";
dt.Columns.Add(columnWidth);
public bool IsReusable {
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了。
随笔 - 114
最大化所有窗口
最小化所有窗口
停靠所有窗口基于无线通讯终端中GUI模型的设计与实现_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
基于无线通讯终端中GUI模型的设计与实现
上传于|0|0|文档简介
&&无线通讯,GUI模型,
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩2页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢2016年2月 总版技术专家分月排行榜第二2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
2016年10月优秀小版主
2016年8月优秀小版主2016年7月优秀小版主优秀小版主2015年7月优秀小版主2015年9月优秀小版主2015年5月优秀小版主2014年11月论坛优秀版主
本帖子已过去太久远了，不再提供回复功能。datagrid 动态绑定列解决思路 - Ajax当前位置:& &&&easy ui
datagrid 动态绑定列解决思路easy ui
datagrid 动态绑定列解决思路&&网友分享于：&&浏览：12次easy ui
datagrid 动态绑定列我的想法是&在table&中动态绑定&,首先向数据库索取可绑定的列
然后再用jquery.append添加到&thead&&&&tr&id='tool'&&&/tr&&/thead&中,
格式没有错误&，&&th&bgcolor="#f1f1f1"&data-options="field:'"+绑定的列名+"'"&&/th&
然后再进行&ajax获取json&绑定datagrid数据。&这样逻辑是没有错误的呀，可是不显示数据!!
想知道&&data-options&&这个方法执行的是怎样的一个机制！~~求指教！！！------解决方案--------------------因为easyui执行datagrid的绘制已经完毕后你才执行jquery.append添加到&thead&&&&tr&id='tool'&&&/tr&&/thead&中,导致找不到列
你需要行jquery.append添加到&thead&&&&tr&id='tool'&&&/tr&&/thead&完毕后，重新执行$('#xxx').datagrid({})生成datagrid对象------解决方案--------------------楼上的分析的很有道理
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有jQuery EasyUI 教程
jQuery EasyUI 数据网格 - 动态改变列
数据网格（DataGrid）列可以使用 'columns' 属性简单地定义。如果您想动态地改变列，那根本没有问题。为了改变列，您可以重新调用datagrid 方法，并传递一个新的 columns 属性。
创建数据网格（DataGrid）
&table id="tt" title="Frozen Columns" class="easyui-datagrid" style="width:550height:250px"
url="data/datagrid_data.json"
singleSelect="true" iconCls="icon-save"&
$('#tt').datagrid({
columns:[[
{field:'itemid',title:'Item ID',width:80},
{field:'productid',title:'Product ID',width:80},
{field:'attr1',title:'Attribute',width:200},
{field:'status',title:'Status',width:80}
运行网页，您将看见：
可是有时候您想改变列，所以您需要写一些代码：
$('#tt').datagrid({
columns:[[
{field:'itemid',title:'Item ID',width:80},
{field:'productid',title:'Product ID',width:80},
{field:'listprice',title:'List Price',width:80,align:'right'},
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
{field:'attr1',title:'Attribute',width:100},
{field:'status',title:'Status',width:60}
请记住，我们已经定义了其他属性，比如：url、width、height 等等。我们不需要再一次定义它们，我们定义那些我们需要改变的。
下载 jQuery EasyUI 实例
反馈内容（*必填）
截图标记颜色
联系方式(邮箱)
联系邮箱：
投稿页面：
记住登录状态
重复输入密码