动态绑定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在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...
随机推荐
- machine learning(14) --Regularization:Regularized linear regression
machine learning(13) --Regularization:Regularized linear regression Gradient descent without regular ...
- 调试错误,请回到请求来源地,重新发起请求。 错误代码 insufficient-isv-permissions 错误原因: ISV权限不足,建议在开发者中心检查对应功能是否已经添加
接人H5手机网站支付宝支付时,已经将表单发给页面了,支付宝响应调试错误,请回到请求来源地,重新发起请求.错误代码 insufficient-isv-permissions 错误原因: ISV权限不足, ...
- socket发送、接收信息----UDP
# 导入套接字包 import socket def welcome(): print("------欢迎进入UDP聊天器--------") print("1.发送信息 ...
- 洛谷P1972 HH的项链【树状数组】
题目:https://www.luogu.org/problemnew/show/P1972 题意:给定一个长度为n的序列,数字表示珠子的种类.m次查询每次询问给定区间内珠子的种类数. 思路:可以说是 ...
- 第四章 初始CSS
一.引入样式 1.行内样式表 <h1 style="color: red;font-size: 18px;">10-30</h1> 2.内部样式表(在hea ...
- VIM--保存和退出等命令
在 Linux 中使用 vim 时,输入 vim xxx.file 按 ESC,左下角就可以进行输入 :w 保存但不退出 :wq 保存并退出 :q 退出 :q! 强制退出,不保存 :e! 放弃所有修改 ...
- SpringMVC返回类型
7.SpringMVC的返回值类型和参数传递 1.SpringMVC的返回值类型 (1)ModelAndView返回值类型: 1.1当返回为null时,页面不跳转. 1.2当返回值没有指定视图名时,默 ...
- hash 算法
Hash,一般翻译做“散列”,也有直接音译为“哈希”的,就是把任意长度的输入(又叫做预映射, pre-image),通过散列算法,变换成固定长度的输出,该输出就是散列值.这种转换是一种压缩映射,也就是 ...
- CF369E Valera and Queries kdtree
给你一堆线段,求:一个区间内包含的本质不同线段种类数(只要线段有一部分在区间中就算是包含) 考虑容斥:总线段数-被那些没有询问的区间完全覆盖的数量. 用离线+树状数组数点或者 KDtree 数点即可. ...
- linux系列(八):cp命令
1.命令格式: cp [选项]... [-T] 源 目的 2.命令功能: 将源文件复制至目标文件,或将多个源文件复制至目标目录. 3.命令参数: -a:此参数的效果和同时指定"-dpR&qu ...