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 不支持动态加载列,上次使用的方法是自己 ...
随机推荐
- 022 ARM寄存器详解
R13:堆栈指针寄存器 SP R14:链接寄存器 LR R15:程序计数器 PC指针 CPSR:当前程序状态寄存器 SPSR:备份程序状态寄存器
- JavaScript高级 面向对象的程序设计 （一）《JavaScript高级程序设计（第三版）》
创建对象 继承 面向对象的语言都有一个表示---类.通过类我们可以创建多个具有相同属性的对象.但是,在JS中并没有类的概念,所以JS的对象也和其他语言的对象不同. 对象的定义:无序的属性集合,其属性可 ...
- <b>和<strong>标签区别
简单说, strong是web标准中xhtml的标签,加强语气,起强调作用(默认是采用加粗来实现强调),逻辑标签: b 是html的,bold粗体. web标准主张xhtml不涉及具体的表现形式,“强 ...
- 深入浅出MongoDB（三）环境搭建
上次的博文深入浅出MongoDB(二)概述中我们已经将MongoDB的相关概念讲解了一下,接下来我们继续进行MongoDB学习.在学习之前,大家首先需要在自己的电脑上安装MongoDB. 1.安装 安 ...
- Yii整合ZF2及soap实例
一)如何整合? // change the following paths if necessary $yii = dirname(__FILE__).'/framework/yii.php'; $c ...
- Pycharm 使用 (一)
学习[Python基础教程]到后面的练习阶段就觉得python自带的IDLE有点out的感觉,于是就在网上搜索好用的IDE, 挺多人推荐Pycharm的 不仅跨平台而且还支持django等框架; 初次 ...
- 第四章 管理程序流(In .net4.5) 之 事件和回调
1. 概述 本章讲解如何使用 委托.lambda表达式 和 匿名方法 来创建和使用事件. 2. 主要内容 2.1 理解委托 委托是一种用方法签名形式定义的类型.可以让它指向其他方法,可以通过它调用其他 ...
- 网络开发库从libuv说到epoll
引言 这篇博文可能有点水,主要将自己libuv的学习过程和理解. 简单谈方法. 有点杂. 那我们开始吧. 首先介绍 githup . 这个工具特别好用. 代码托管. 如果不FQ可能有点卡. 但是应该试 ...
- EMVTag系列9《卡片管理数据》
Ø 5F30 服务码 F: n 3 T: 5F30 L: 2 -O(可选):可选数据元 按GB/T 17552标准,卡片中的服务码(5F30) 的值,要和二磁道等效数据57中的服务码的值完全一 ...
- jdbc 连接 oracle rac
jdbc 连接 oracle rac 的连接串如下: jdbc:oracle:thin:@(DESCRIPTION =(ADDRESS = (PROTOCOL = TCP)(HOST = 192. ...