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 不支持动态加载列,上次使用的方法是自己 ...
随机推荐
- javaSE第二十七天
第二十七天 447 1:反射(理解) 447 (1)类的加载及类加载器 447 (2)反射: 448 A:定义 448 B:获取字节码对象的三种方式 449 (3) ...
- 基于opencv网络摄像头在ubuntu下的视频获取
基于opencv网络摄像头在ubuntu下的视频获取 1 工具 原料 平台 :UBUNTU12.04 安装库 Opencv-2.3 2 安装编译运行步骤 安装编译opencv-2.3 参 ...
- 在javascript中如何取消事件冒泡
如果在javascript中只希望事件发生在它的目标而不是在它的父元素上,即取消它的冒泡事件的发生,该如何做?因为按照javascript发生事件的顺序,它由两个阶段:分别从根元素--父元素--目标元 ...
- ie使用firebug
在网页插入以下代码即可. <script type="text/javascript" src="http://getfirebug.com/releases/li ...
- CentOS6 更改Mysql数据库的数据存放位置
mysql使用yum安装时,默认的数据是存储在/var/lib/mysql下.一般情况下,为了数据的安全性,建议将mysql数据库的数据文件存储在系统的第二块磁盘上的目录下可以按照以下步骤进行操作: ...
- c#中判断对象为空的几种方式（字符串等）
(1)先了解几个与空类型相关的关键字和对象 Null : 关键字表示不引用任何对象的空引用,它是所有引用类型变量的默认值,在2.0版本之前也就只有引用变量类型可以为null,如(string a=n ...
- sql server 查询表信息
SELECT '表名' = e.[name], '表说明' = f.[value], '字段序号' = a.colorder, '字段名' = a.[name], '字段类型' = b.[name], ...
- Linux安装配置php环境的方法
本文实例讲述了Linux安装配置php环境的方法.分享给大家供大家参考,具体如下: 1.获取安装文件: http://www.php.net/downloads.php php-5.3.8.tar.g ...
- mac 下 svn ignore 操作
如何在svn中设备忽略的文件或者文件夹 1.如果你还没有对你的文件夹进行版本控制,则可以直接图形操作上进行ignore,或者在命令中运行 svn propedit svn:ignore 文件夹名 . ...
- Jquery数组操作技巧
Jquery对数组的操作技巧. 1. $.each(array, [callback]) 遍历[常用] 解释: 不同于例遍 jQuery 对象的 $.each() 方法,此方法可用于例遍任何对象(不 ...