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 不支持动态加载列,上次使用的方法是自己 ...
随机推荐
- Sublime Text 使用 Emmet 补全错误问题
Sublime Text安装了Emmet后,使用Tab或者ctrl+e发现补全有问题,如: div.testClass#testId 变成了 div.<testClass id="te ...
- PHP高级笔记汇总
一.PHP日期 PHP的date()函数用于格式化时间或日期.PHP Date()函数可把时间戳格式化为可读性更好的日期和时间.语法:date(format,timestamp)format:必需.规 ...
- Lenovo Setup（安装程序）
按住F1,进入“Lenovo Setup”. 一.Main(条目处的设置不可更改) UEFI BIOS Version H1ET69WW(1.12) UEFI BIOS Date(Year-Month ...
- pos机抹零功能
抹零功能设置包括抹分-0.抹角-1.抹元-2. 前台界面和逻辑代码如下 //抹零设置 2016/8/16 QT if (sweepCents.Checked==true) { BusinessClas ...
- 一个特别不错的jQuery快捷键插件:js-hotkeys
这其实不是什么新技术,这个插件在很早前就已经发布了,之前有项目用到,所以分享出来添加方式的例子 jQuery.hotkeys.add('esc',function (){ //执行函数 }); jQu ...
- 关于PYTHON_EGG_CACHE无权限的问题
Perhaps your account does not have write access to this directory? You can change the cache director ...
- WordPress 主题开发 - (七) 让主题更安全 待翻译
We're just about ready to start building our theme's template files. Before we do this, however, it' ...
- web.xml中常见配置解读
文章转自:http://blog.csdn.net/sdyy321/article/details/5838791 有一般XML都必须有的版本.编码.DTD <web-app>下子元素&l ...
- 每天进步一点--c#基础巩固,事件、委托
要想技术有所提高,就是把有些问题真正的弄懂弄明白,我从事C#开发两年了,一直对事件委托等概念一知半解,有时候博客园上看看别的大牛的文章,看看懂了就过去了,时间长了又忘了,真正理解还是要自己动手弄些例子 ...
- python学习应用笔记（一）
之前一直用c++写程序 所以考虑程序一般都比较容易往数据结构的方向想 而自己设计数据结构往往要费很大事 昨天看了一下python 发现脚本语言 真是厉害 用来进行模拟运算确实不错 可以先 ...