查了很多资料，有点乱
首先声明一下这里必须要用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/
EasyUI datagrid 动态绑定列,布布扣,bubuko.com
原文：http://www.cnblogs.com/luwenlong/p/3736568.html