动态绑定easyui datagrid列名
根据实时数据在同一个DataGrid中显示不同字段,本身easyui并没有支持动态绑定列名,只有show属性显示或隐藏某字段。今天在网上看到直接修改easyui类库动态绑定列名的方法，废话不多说直接借用源码备份以后用。先说一下思路：首先UI的datagrid中没有指定任何列，ajax提交成功后同时返回列的信息，先进行列的动态绑定，然后显示数据内容。
1.UI
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DynamicDatagird.aspx.cs" Inherits="WebUtils.DynamicDatagird" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>动态datagrid</title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.easyui.min.js" type="text/javascript"></script>
<link href="Style/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$('#tbUsers').datagrid({
title: 'My Title',
width: 600,
height: 350,
dataType: 'json',
url: 'GetAjaxData.ashx?action=GetUserList2',
columns: [[]],
pagination: true,
pageSize: 5, //每页记录数
pageList: [5, 10, 15, 20, 30, 50], //分页记录数数组
onLoadSuccess: function (data, param) {
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tbUsers">
</table>
</div>
</form>
</body>
</html>
2.easyUI类库的修改（位置在datagrid ajax提交位置L6220处）
function _43f() {
$.ajax({ type: opts.method, url: opts.url, data: _43d, dataType: "json", success: function (data) {
//动态添加列
if (!!data && !!data.columns) {
var opts=$.data(_43a, "datagrid").options;
var _369 = $.data(_43a, "datagrid").panel;
var cols = $.data(_43a, "datagrid").options.columns[0];
var colCount=cols.length;
if(colCount==0){
//cols.slice(0,cols.length);//清除数组内容
for (var i = 0; i < data.columns.length; i++) {
var col = {
field: data.columns[i].field,
title: data.columns[i].title,
width: data.columns[i].width,
align: data.columns[i].align
};
cols.push(col);
}
//UI添加列
if (colCount==0 && opts.columns) {
var t = _370(opts.columns);
$("div.datagrid-view2 div.datagrid-header-inner", _369).html(t);
}
}
}
setTimeout(function () {
_440();
}, 0);
if(!!data && !!data.rows){
_3a2(_43a, data);
}
setTimeout(function () {
_42d(_43a);
}, 0);
}, error: function () {
setTimeout(function () {
_440();
}, 0);
if (opts.onLoadError) {
opts.onLoadError.apply(_43a, arguments);
}
}
});
};
3.后台提供数据（一般处理程序）
public void GetUserList(HttpContext context) {
String strJson = @"{
'total':20,
'rows':[
{'name':'zhangsan01','age':'21','hobby':'001'},
{'name':'zhangsan02','age':'21','hobby':'001'},
{'name':'zhangsan03','age':'21','hobby':'001'},
{'name':'zhangsan04','age':'21','hobby':'001'},
{'name':'zhangsan05','age':'21','hobby':'001'}
],
'columns':[
{'field':'name','title':'Name','width':100,'align':'center'},
{'field':'age','title':'Age','width':100,'align':'center'},
{'field':'hobby','title':'Hobby','width':100,'align':'center'}
]
}";
strJson = strJson.Replace("'", "/"");
HttpResponse response = context.Response;
response.ContentType = "text/json";
response.Write(strJson);
}
这样就完成了动态绑定列名。功能是可以了，还不利于大量生产，需要提供自动集合转Json的类。
为此，我设计了一个JDataGrid类用于将List的集合生成我的DataGrid需要的数据格式（包含列的信息）。
1.定义User类，就作为实体类
public void GetUserList(HttpContext context) {
public class User {
public string Name { get; set; }
public int Age { get; set; }
public string Gender { get; set; }
public string Hobby { get; set; }
}
}
2.定义JDataGrid类和JColumn类
public class JDataGrid {
public int total { get; set; }
public List<Dictionary<string, object>> rows { get; set; }
public List<JColumn> columns { get; set; }
public static List<Dictionary<string, object>> ConvertRows(IList list) {
List<Dictionary<string, object>> rowsList=new List<Dictionary<string, object>>();
if (list != null) {
foreach (object obj in list) {
Dictionary<string, object> dic = new Dictionary<string, object>();
Type t = obj.GetType();
foreach (PropertyInfo pi in t.GetProperties()) {
string key = pi.Name;
object value=pi.GetValue(obj, null);
dic.Add(key, value);
}
rowsList.Add(dic);
}
}
return rowsList;
}
public string ConvertToJson() {
StringBuilder sb = new StringBuilder();
sb.AppendFormat("{{/"total/":{0},/"rows/":[", total);
//添加数据
if (rows != null && rows.Count > ) {
for (int i = ; i < rows.Count; i++) {
sb.Append("{");
foreach (string key in rows[i].Keys) {
if (rows[i][key] is ValueType) {
sb.AppendFormat("/"{}/":{1},", key, rows[i][key]);
} else {
sb.AppendFormat("/"{}/":/"{}/",", key, rows[i][key]);
}
}
sb.Remove(sb.Length - , );
sb.Append("}");
if (i != rows.Count - ) {
sb.Append(",");
}
}
}
sb.Append("],");
sb.Append("/"columns/":[");
//添加列
if (columns != null && columns.Count > ) {
for (int i = ; i < columns.Count; i++) {
sb.Append(columns[i].ConvertToJson());
if (i != columns.Count - ) {
sb.Append(",");
}
}
}
sb.Append("]}");
string str=sb.ToString();
return str;
}
}
public class JColumn {
public int rowspan { get; set; }
public int colspan { get; set; }
public bool checkbox { get; set; }
public string field { get; set; }
public string title { get; set; }
public int width { get; set; }
public string align { get; set; }
public string ConvertToJson() {
StringBuilder sb = new StringBuilder();
sb.Append("{");
if (rowspan != null) {
sb.AppendFormat("/"rowspan/":{0},", rowspan);
}
if (colspan != null) {
sb.AppendFormat("/"colspan/":{0},", colspan);
}
if (checkbox != null) {
sb.AppendFormat("/"checkbox/":{0},", checkbox);
}
sb.AppendFormat("/"field/":/"{}/",", field);
sb.AppendFormat("/"width/":{0},", width);
sb.AppendFormat("/"align/":/"{}/",", align);
sb.AppendFormat("/"title/":/"{}/",", title);
sb.Remove(sb.Length - , );
sb.Append("}");
String str = sb.ToString();
return str;
}
}
3.后台获取数据（一般处理程序）
public void GetUserList2(HttpContext context) {
List<User> userList = new List<User>();
for (int i = ; i < ; i++) {
userList.Add(new User {
Name = "Name" + (i + ),
Age = + i,
Gender = i % == ? "男" : "女",
Hobby = i.ToString()
});
}
List<JColumn> colList = new List<JColumn>() {
new JColumn{field="Name",title="姓名",width=,align="center"},
new JColumn{field="Age",title="年龄",width=,align="center"},
new JColumn{field="Gender",title="性别",width=,align="center"},
new JColumn{field="Hobby",title="兴趣",width=,align="center"},
};
JDataGrid dg = new JDataGrid {
total=,
rows=JDataGrid.ConvertRows(userList),
columns=colList,
};
string strJson = dg.ConvertToJson();
HttpResponse response = context.Response;
response.ContentType = "text/json";
response.Write(strJson);
}
对比前面的方法，显示代码通用多了
动态绑定easyui datagrid列名的更多相关文章
- jQuery EasyUI datagrid列名包含特殊字符会导致表格错位
首先申明:本文所述的Bug存在于1.3.3以及更高版本中,其它低版本,本人未测试,太老的版本不想去折腾了. 洒家在写前端的SQL执行工具时,表格用了 jQuery EasyUI datagrid,因为 ...
- (转)扩展jquery easyui datagrid 之动态绑定列和数据
本文转载自:http://blog.csdn.net/littlewolf766/article/details/7336550 easyui datagrid 不支持动态加载列,上次使用的方法是自己 ...
- JQuery EasyUI之DataGrid列名和数据列分别设置不同对齐方式(转)
需求如下 现有数据列三列 Name,Age,CreateDate 数据 张三,18,2000-12-09 :12:34:56 李四,28,2000-12-09 :12:34:56 王麻子,38,200 ...
- easyui datagrid标题列宽度自适应
最近项目中使用easyui做前端界面,相信大部分使用过easyui datagrid的朋友有这么一个疑问:如果在columns中不设置width属性能不能写个方法让datagrid的头部标题和数据主体 ...
- EasyUI Datagrid 鼠标悬停显示单元格内容 复制代码
EasyUI Datagrid 鼠标悬停显示单元格内容 ,halign:, align: 0 « 上一篇:LINQ to Entities 中的查询» 下一篇:去掉字符串中的非数字字符 posted ...
- easyui datagrid动态设置行、列、单元格不允许编辑
Easyui datagrid 行编辑.列编辑.单元格编辑设置 功能: 动态对datagrid 进行行.列.单元格编辑进行设置不允许编辑. 禁用行编辑: 在编辑方法调用前,对选择的行进行判断,如果不允 ...
- easyui datagrid 禁止选中行 EF的增删改查（转载） C# 获取用户IP地址（转载） MVC EF 执行SQL语句（转载） 在EF中执行SQL语句（转载） EF中使用SQL语句或存储过程 .net MVC使用Session验证用户登录 PowerDesigner 参照完整性约束(转载)
easyui datagrid 禁止选中行 没有找到可以直接禁止的属性,但是找到两个间接禁止的方式. 方式一: //onClickRow: function (rowIndex, rowData) ...
- JQuery easyUI DataGrid 创建复杂列表头(译)
» Create column groups in DataGrid The easyui DataGrid has ability to group columns, as the followin ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（8）-MVC与EasyUI DataGrid 分页
系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...
随机推荐
- pandas 4
参考资料:https://mp.weixin.qq.com/s/QnxaOrvlWJn6Dr42Ic1CcQ 1 #只选取housing,loan,contac和poutcometest_data[ ...
- python导包问题，这一篇就够了
解决办法: 将项目所在的根目录添加到sys.path中 在入口文件中加入如下代码: import sys import os # 将 项目的根目录添加到sys.path中 BASE_DIR = os. ...
- linux中的set ff=unix
set ff=unix : 告诉 vi 编辑器,使用unix换行符. 操作步骤: 1.用vi命令打开文件 2.直接输入 :set ff=unix
- sql server 子查询 和exists使用
概述 子查询的概念: 当一个查询是另一个查询的条件时,称之为子查询.子查询可以嵌套在主查询中所有位置,包括SELECT.FROM.WHERE.GROUP BY.HAVING.ORDER BY. 外面的 ...
- 8.1.T1
string 题面什么的 抱歉,被我咕咕咕了 考场思路: sort大法好 n2log2n过 40% 令人着实兴奋 正解: 线段树+桶 利用只有26个字母的优势 好吧,26个字母,只怪我没想到 代码: ...
- AC自动机1030 [JSOI2007]文本生成器
/*Description JSOI交给队员ZYX一个任务,编制一个称之为“文本生成器”的电脑软件:该软件的使用者是一些低幼人群,他们现在使用的是GW文本生成器v6版.该软件可以随机生成一些文章――― ...
- javaee三层架构案例--简单学生管理系统
背景 学了jdbc.jsp等需要串起来,不然会忘记 项目环境 win10 jdk11 mysql8.0.13 jar包 c3p0-0.9.5.2 commons-dbutils-1.7 jstl mc ...
- [bzoj 1010][HNOI 2008]玩具装箱
传送门 Description P教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行压 缩,其可以将任意物品变成一堆,再放到一种特殊的一维容器中.P教授有编号 ...
- 使用tmate快速分享你的终端会话
tmate 的意思是 teammates,它是 tmux 的一个分支,并且使用相同的配置信息(例如快捷键配置,配色方案等).它是一个终端多路复用器,同时具有即时分享终端的能力.它允许在单个屏幕中创建并 ...
- 详解css3 pointer-events（阻止hover、active、onclick等触发事件来
pointer-events 更像是JavaScript,它能够: 阻止用户的点击动作产生任何效果 阻止缺省鼠标指针的显示 阻止CSS里的 hover 和 active 状态的变化触发事件 阻止Jav ...