EasyUI datagrid 动态绑定列
20140604更新，发现了两种写法，第二种写法更佳
第一种：
查了很多资料，有点乱
首先声明一下这里必须要用easyui1.3.1
不多说直接上代码：
首先打开jquery.easyui.min.js，查找_53b()
找到下面的代码
function _53b(){ var _53c=opts.loader.call(_538,_53a,function(data){ setTimeout(function(){ $(_538).datagrid("loaded"); },0); _4b1(_538,data); setTimeout(function(){ _52b(_538); },0); }
替换成下面这段代码
function _53b(){ var _53c=opts.loader.call(_538,_53a,function(data){ //add dynamic columns if(data!=null && data.cols!=null){ var opts=$.data(_538, "datagrid").options; var cols = $.data(_538, "datagrid").options.columns[0]; var colCount=cols.length; if(colCount==0){ for (var i = 0; i < data.cols.length; i++) { var col = { field: data.cols[i].field, title: data.cols[i].title, width: data.cols[i].width }; cols.push(col); } //UI if (colCount==0 && opts.columns) { _461(_538); } } } setTimeout(function(){ $(_538).datagrid("loaded"); },0); _4b1(_538,data); setTimeout(function(){ _52b(_538); },0); }
然后开始写html
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DynamicDataTable.aspx.cs" Inherits="MyWeb.DynamicDataTable" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head runat="server"> <title></title> <link href="js/easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="js/easyui/themes/icon.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script> <script src="js/easyui/jquery.easyui.min.js" type="text/javascript"></script> <script src="js/jquery.json/jquery.json-2.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#tbEmployee').datagrid({ title: 'Customer Infos', width: 700, height: 350, nowrap: true, pagination: true, rownumbers: true, url: 'Services/EmployeeService.asmx/GetCustomerList', columns: [[]] }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <table id="tbEmployee"> </table> </div> </form> </body> </html>
后代码如下：
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; using Newtonsoft.Json; using Newtonsoft.Json.Linq; using System.Web.Script.Services; namespace MyWeb.Services { /// <summary> /// EmployeeService /// </summary> [WebService(Namespace = ")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.ComponentModel.ToolboxItem(false)] // ASP.NET AJAX Web ?? [System.Web.Script.Services.ScriptService] public class EmployeeService : System.Web.Services.WebService { [WebMethod] public void GetCustomerList() { // // // NorthwindEntities db=new NorthwindEntities(); // int count = db.Customers.Count(); // int page = Convert.ToInt32(Context.Request.Form["page"]); int rows = Convert.ToInt32(Context.Request.Form["rows"]); // List<Customers> cusList = db.Customers.OrderBy(c => c.CustomerID).Skip((page - 1) * rows).Take(rows).ToList(); //JSON JObject result = new JObject( new JProperty("total", count), new JProperty("rows", new JArray( from c in cusList select new JObject( new JProperty("CustomerID", c.CustomerID), new JProperty("Name", c.ContactName), new JProperty("City",c.City), new JProperty("Address",c.Address) ) )) ); //?? List<EColumn> colList = new List<EColumn>() { new EColumn{Field="CustomerID",Title="",Width=80}, new EColumn{Field="Name",Title="",Width=80}, new EColumn{Field="City",Title="",Width=80}, new EColumn{Field="Address",Title="",Width=120}, }; JArray cols = new JArray( from c in colList select new JObject( new JProperty("field", c.Field), new JProperty("title", c.Title), new JProperty("width", c.Width), new JProperty("sortable", c.Sortable), new JProperty("checkbox", c.Checkbox) ) ); result.Add(new JProperty("cols", cols)); Context.Response.ContentType = "application/json;utf-8"; Context.Response.Write(result.ToString()); } } }
补充一个类
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MyWeb { [Serializable] public class EColumn { public string Field { get; set; } public double Width { get; set; } public string Title { get; set; } public bool Sortable { get; set; } public bool Checkbox { get; set; } } }
OK搞定
原文地址：http://www.cprogramdevelop.com/4142833/
第二种：
这种方法是从一个国外网站上发现的的，膜拜大神！
这里只上代码，你会easyuigrid应该就能看懂，大体思路就是，后代获得列的集合后在动态绑定grid，实现的时间有点长，所以就不一点一点介绍了。
function loadData(scmc, scdx, xz, xx, nj, bj,lie) { var tj = ""; if (scmc != "") { tj += "&scmc=" + scmc; } if (scdx != "") { tj += "&scdx=" + scdx; } if (xz != "") { tj += "&xz=" + xz; } if (xx != "") { tj += "&xx=" + xx; } if (nj != "") { tj += "&nj=" + nj; } if (bj != "") { bj += "&bj=" + bj; } //这里是重点 var colStruct = []; var colItems = []; colStruct.pop(); $.getJSON('/ceshi/ceshi1.ashx?op=anssit' + tj, { page: 1, rows: 10, order: 'asc', sort: 'xh', lie: lie }, function(data) { if (data == null) { alert("没有信息"); return; } var obj = eval(data.cols);//获得列的集合json for (var i = 0; i < obj.length; i++) { var value = obj[i]; var menuItem = { field: value.field, title: value.title, align: value.align, width: value.width, sortable: value.sortable }; colItems.push(menuItem); } colStruct.push(colItems);//处理成和easyui原版一样的格式 $('#List').datagrid({ columns: colStruct,//直接绑定即可 url: '/ceshi/ceshi.ashx?op=anssit' + tj, width: 1000, height: 330, methord: 'post', rownumbers: true, sortName: 'xh', sortOrder: 'asc', idField: 'xh', pageSize: 10, pageList: [10, 20, 30, 40, 50], pagination: true, striped: true, //奇偶行是否区分 singleSelect: true }); }); }
简单吧。
