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 不支持动态加载列,上次使用的方法是自己 ...
随机推荐
- CentOS学习笔记--目录配置
Linux目录配置 类Linux的目录看上去差不多,为什么? 以下内容节选自l 鸟哥的 Linux 私房菜 -- 基础学习篇目录 第六章.Linux 的文件权限与目录配置 3. Linux目录配 ...
- Sublime Text 2 常用快捷键
Sublime Text 2 常用的快捷键 (不包含插件快捷键) Ctrl+P 打开文件搜索框,可以直接输入文件名搜索,或者输入@funcName 可以直接到函数定义处,输入#key 可以直接查找,输 ...
- PL/SQL Developer使用
查询存储过程方法:1.右上角小百页 - 新建SQL窗口 - 复制存储过程名称 - 按住CTRL - 点击链接进入2.点击查询按钮(望远镜) - 文本查找输入名称 - 对象类型默认(函数.过程,包说明, ...
- IOS基础——IOS学习路线图（一）
一.一个月 1.OC语法基础. 2.KVC和KVO 3.IOS UI基础 4.UI表视图与集合视图 5.UIStoryboard和autoLayout 6.Ipad API 二.10天 7.静态页面考 ...
- c#使用DocX给word添加目录TOC
刚要做目录的时候,我就想DocX应该提供了这个方面的函数.于是我就在讨论区搜索,看看别人是怎么用的. 我搜索了catalog; catalogue; list; contents;,但是都没有和目录有 ...
- ES2015 ——let命令的暂时性死区
ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. 和var不同的还有,let命令不存在变量提升,所以声明前调用变量,都会报错,这就涉及到 ...
- azure注册码
用户名:aaa 注册秘钥:2GQrt5XHYY7SBK/4b22Gm4Dh8alaR0/0k3gEN5h7FkVPIn8oG3uphlOeytIajx 注册用户名:www.yuanxingku.com ...
- apache日志文件详解和实用分析命令
apache日志文件每条数据的请意义,以及一些实用日志分析命令. 一.日志分析 如果apache的安装时采用默认的配置,那么在/logs目录下就会生成两个文件,分别是access_log和error ...
- Yii中使用PHPexcel获取excel中数据
1.view中代码如下: <form name="frmBatchSettle" id="" action="" method=&qu ...
- 【C++】快排
假设要排序的数据类型为int int main() { qsort(a,len,sizeof(int),cmp); //qsort(数组的起始位置,排序个数,类型大小,比较函数); } int cmp ...