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 - ) * 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=},
new EColumn{Field="Name",Title="",Width=},
new EColumn{Field="City",Title="",Width=},
new EColumn{Field="Address",Title="",Width=},
};
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
});
});
}
简单吧。
EasyUI datagrid 动态绑定列的更多相关文章
- easyUI datagrid 动态绑定列名称
easyUI 基于Jquery ,所以需要引用Jquery文件 easyUI自带了很多样式文件,可以根据需要,引用相应的css文件. 其中datagrid是一个根据json数据,js前端生成前端显示的 ...
- easyui datagrid的列编辑
[第十五篇]easyui datagrid的列编辑,同时插入两张表的数据进去 看图说话. 需求:插入两张表,上面的表单是第一张表的内容,下面的两个表格是第二张详情表的内容,跟第一张表的id关联 第 ...
- easyui datagrid标题列宽度自适应
最近项目中使用easyui做前端界面,相信大部分使用过easyui datagrid的朋友有这么一个疑问:如果在columns中不设置width属性能不能写个方法让datagrid的头部标题和数据主体 ...
- EASYUI DATAGRID 多列复选框CheckBox
主要实现: 用的 easyui 1.3.2 实现多个复选框列,各列互不影响.能够实现全选.主要部门用红色标记了的. easyui datagrid 初始化: <script> functi ...
- EasyUI Datagrid 自定义列、Foolter及单元格编辑
1:自定义列,包括 Group var head1Array = []; head1Array.push({ field: 'Id', title: 'xxxx', rowspan: 2 }); he ...
- 【第十五篇】easyui datagrid的列编辑，同时插入两张表的数据进去
看图说话. 需求:插入两张表,上面的表单是第一张表的内容,下面的两个表格是第二张详情表的内容,跟第一张表的id关联 第二张表有一个列是需要用户手动填写添加的. 国际惯例,上代码 <div id= ...
- 统计easyui datagrid某列之和显示在对应列下面
项目需求要在表格下面加一行统计求和的,结果网上搜寻了一堆,要么说的不详细,高深大牛们的见解:要么实现不了,搜寻老半天修改出一个可以用的,做一下学习记录,新手菜鸟,欢迎指正和新解决方案. 最终效果图: ...
- easyui datagrid 格式化列显示两位小数、千分位
{ field: , formatter: function (value, row, index) { if (row != null) { ); } } }, //二位小数.千分位 { field ...
- (转)扩展jquery easyui datagrid 之动态绑定列和数据
本文转载自:http://blog.csdn.net/littlewolf766/article/details/7336550 easyui datagrid 不支持动态加载列,上次使用的方法是自己 ...
随机推荐
- 十八、ValueStack&ActionContext（非常重点：值栈）
ValueStack&ActionContext(非常重点:值栈) 1.针对用户的每次动作访问,都会创建属于自己的ValueStack对象 2.ValueStack中的的常用方法:功能一定要知 ...
- 十七、OGNL表达式
十七.OGNL OGNL简介: OGNL是对象导航图语言.它是一个独立的项目.早期的webwork框架用到了OGNL作为自己的表达式语言, 所以struts2也是用OGNL作为表达式语言,当然也可以使 ...
- css3- border
css3-border 1.border-color 2.border-image 3.border-radius ( none | <length>{1,4} [ / <leng ...
- 改变tabbar的高度做法
UITabBarController *tabBarController =[[UITabBarController alloc] init]; CGRect frame = self.window. ...
- 第一部分 CLR基础：第1章 CLR的执行模型
1.1将源代码编译成托管模块
- 如何调节datagridview中字体
设置ColumnHeaderDefaultCellStyle的Font属性 或者 编程 datagridview.Columns[index].DefaultCellStyle.Font.Size=“ ...
- mysql 5.7压缩包安装笔记
转载请注明出处http://www.cnblogs.com/havedream/p/5075263.html 重装系统之后准备安装mysql,看到官网上有mysql 5.7.10可以下载就点了,然后就 ...
- Knockout.Js官网学习(数组observable)
前言 如果你要探测和响应一个对象的变化,你应该用observables. 如果你需要探测和响应一个集合对象的变化,你应该用observableArray . 在很多场景下,它都非常有用,比如你要在UI ...
- Thinkphp 下面执行crond
thinkphp开启cli支持 1.tp正好支持cli命令模式,手册的路径为13.7.4 如果是用的其他框架不支持cli,那么只能直接写程序了,其实就是写面向过程的最基础的php代码. 2.在入口文 ...
- java实现的MySQL自动备份和还原（struts2+Hibernate）---兼容 window+Linux
相信很多朋友都经历过数据库出问题的情况,我也同样(见我的上一篇博文:phpmyadmin误删表后的恢复过程(心惊胆跳啊) ).如果数据很大或者很重要,那么恢复起来是相当困难的,所以我们在做一个相对 ...