根据实时数据在同一个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列名的更多相关文章

  1. jQuery EasyUI datagrid列名包含特殊字符会导致表格错位

    首先申明:本文所述的Bug存在于1.3.3以及更高版本中,其它低版本,本人未测试,太老的版本不想去折腾了. 洒家在写前端的SQL执行工具时,表格用了 jQuery EasyUI datagrid,因为 ...

  2. (转)扩展jquery easyui datagrid 之动态绑定列和数据

    本文转载自:http://blog.csdn.net/littlewolf766/article/details/7336550 easyui datagrid 不支持动态加载列,上次使用的方法是自己 ...

  3. JQuery EasyUI之DataGrid列名和数据列分别设置不同对齐方式(转)

    需求如下 现有数据列三列 Name,Age,CreateDate 数据 张三,18,2000-12-09 :12:34:56 李四,28,2000-12-09 :12:34:56 王麻子,38,200 ...

  4. easyui datagrid标题列宽度自适应

    最近项目中使用easyui做前端界面,相信大部分使用过easyui datagrid的朋友有这么一个疑问:如果在columns中不设置width属性能不能写个方法让datagrid的头部标题和数据主体 ...

  5. EasyUI Datagrid 鼠标悬停显示单元格内容 复制代码

    EasyUI Datagrid 鼠标悬停显示单元格内容 ,halign:, align: 0 « 上一篇:LINQ to Entities 中的查询» 下一篇:去掉字符串中的非数字字符 posted ...

  6. easyui datagrid动态设置行、列、单元格不允许编辑

    Easyui datagrid 行编辑.列编辑.单元格编辑设置 功能: 动态对datagrid 进行行.列.单元格编辑进行设置不允许编辑. 禁用行编辑: 在编辑方法调用前,对选择的行进行判断,如果不允 ...

  7. easyui datagrid 禁止选中行 EF的增删改查(转载) C# 获取用户IP地址(转载) MVC EF 执行SQL语句(转载) 在EF中执行SQL语句(转载) EF中使用SQL语句或存储过程 .net MVC使用Session验证用户登录 PowerDesigner 参照完整性约束(转载)

    easyui datagrid 禁止选中行   没有找到可以直接禁止的属性,但是找到两个间接禁止的方式. 方式一: //onClickRow: function (rowIndex, rowData) ...

  8. JQuery easyUI DataGrid 创建复杂列表头(译)

    » Create column groups in DataGrid The easyui DataGrid has ability to group columns, as the followin ...

  9. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(8)-MVC与EasyUI DataGrid 分页

    系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...

随机推荐

  1. require sqlite3时报The specified module could not be found.错误

    http://dependencywalker.com/ 在这个站点下载对应平台的Dependency Walker,打开你自己编译好的.node文件(sqlite3\lib\binding\node ...

  2. 最短路--SPFA及其优化

    SPFA Shortest Path Faster Algorithm 最短路径最快算法 算法思想 SPFA 算法是 Bellman-Ford算法 的队列优化算法的别称,通常用于求含负权边的单源最短路 ...

  3. Greenplum 监控segment是否正常

    在greenplum运行过程中,Segement很有可能因为压力大出现不可用的情况, 主备Segement发现了切换,或是主备Segement网络断开,数据不同步了.在 默认情况下,如果GreenPl ...

  4. [Luogu] 货车运输

    https://www.luogu.org/problemnew/show/1967 kruskal + Lca #include <iostream> #include <cstd ...

  5. Python中的各种排序问题

    小书匠python排序 本章目录,快速浏览所需内容: 基本的排序 1.列表(list) 1.1按列表元素大小排序 1.2按列表元素的属性 2.字典(dictory) 3.元组(tuple)排序 3.1 ...

  6. epoll事件模型

    事件模型 EPOLL事件有两种模型: Edge Triggered (ET) 边缘触发只有数据到来才触发,不管缓存区中是否还有数据. Level Triggered (LT) 水平触发只要有数据都会触 ...

  7. centos7haproxy+keepalive

    1部署keepalived 1.1下载keepalived源码包,并解压# wget http://www.keepalived.org/software/keepalived-1.4.2.tar.g ...

  8. 二分算法题目训练(二)——Exams详解

    CodeForces732D——Exams 详解 Exam 题目描述(google翻译) Vasiliy的考试期限将持续n天.他必须通过m门科目的考试.受试者编号为1至m. 大约每天我们都知道当天可以 ...

  9. lightgbm用于排序

    一. LTR(learning to rank)经常用于搜索排序中,开源工具中比较有名的是微软的ranklib,但是这个好像是单机版的,也有好长时间没有更新了.所以打算想利用lightgbm进行排序, ...

  10. A·F·O小记

    看过很多的游记,也看过很多的退役记.回忆录,而当自己真正去面对的那一刻,却又不知道从何说起,也不知道能用怎样的形式和语言,才能把这段珍贵的记忆封存起来,留作青春里的一颗璀璨明珠…… 还是随便写写吧…… ...