• 动态绑定easyui datagrid列名


    根据实时数据在同一个DataGrid中显示不同字段,本身easyui并没有支持动态绑定列名,只有show属性显示或隐藏某字段。今天在网上看到直接修改easyui类库动态绑定列名的方法,废话不多说直接借用源码备份以后用。

    先说一下思路:首先UI的datagrid中没有指定任何列,ajax提交成功后同时返回列的信息,先进行列的动态绑定,然后显示数据内容。

    1.UI

     1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DynamicDatagird.aspx.cs"     
     2     Inherits="WebUtils.DynamicDatagird" %>     
     3      
     4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">     
     5 <html xmlns="http://www.w3.org/1999/xhtml">     
     6 <head runat="server">     
     7     <title>动态datagrid</title>     
     8     <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>     
     9     <script src="Scripts/jquery.easyui.min.js" type="text/javascript"></script>     
    10     <link href="Style/themes/default/easyui.css" rel="stylesheet" type="text/css" />     
    11     <script type="text/javascript">     
    12         $(function () {      
    13             $('#tbUsers').datagrid({      
    14                 title: 'My Title',      
    15                  600,      
    16                 height: 350,      
    17                 dataType: 'json',      
    18                 url: 'GetAjaxData.ashx?action=GetUserList2',      
    19                 columns: [[]],      
    20                 pagination: true,      
    21                 pageSize: 5,                //每页记录数      
    22                 pageList: [5, 10, 15, 20, 30, 50], //分页记录数数组      
    23                 onLoadSuccess: function (data, param) {      
    24                           
    25                 }      
    26             });      
    27         });      
    28     </script>     
    29 </head>     
    30 <body>     
    31     <form id="form1" runat="server">     
    32     <div>     
    33         <table id="tbUsers">     
    34         </table>     
    35     </div>     
    36     </form>     
    37 </body>     
    38 </html>    

    2.easyUI类库的修改(位置在datagrid ajax提交位置L6220处)

     1 function _43f() {      
     2     $.ajax({ type: opts.method, url: opts.url, data: _43d, dataType: "json", success: function (data) {      
     3         //动态添加列      
     4         if (!!data && !!data.columns) {      
     5             var opts=$.data(_43a, "datagrid").options;      
     6             var _369 = $.data(_43a, "datagrid").panel;      
     7             var cols = $.data(_43a, "datagrid").options.columns[0];      
     8             var colCount=cols.length;      
     9             if(colCount==0){      
    10                 //cols.slice(0,cols.length);//清除数组内容      
    11                 for (var i = 0; i < data.columns.length; i++) {      
    12                     var col = {      
    13                         field: data.columns[i].field,      
    14                         title: data.columns[i].title,      
    15                          data.columns[i].width,      
    16                         align: data.columns[i].align      
    17                     };      
    18                     cols.push(col);      
    19                 }      
    20                 //UI添加列      
    21                 if (colCount==0 && opts.columns) {      
    22                     var t = _370(opts.columns);      
    23                     $("div.datagrid-view2 div.datagrid-header-inner", _369).html(t);      
    24                 }      
    25             }      
    26         }      
    27         setTimeout(function () {      
    28             _440();      
    29         }, 0);      
    30         if(!!data && !!data.rows){      
    31             _3a2(_43a, data);      
    32         }      
    33         setTimeout(function () {      
    34             _42d(_43a);      
    35         }, 0);      
    36     }, error: function () {      
    37         setTimeout(function () {      
    38             _440();      
    39         }, 0);      
    40         if (opts.onLoadError) {      
    41             opts.onLoadError.apply(_43a, arguments);      
    42         }      
    43     }       
    44     });      
    45 };    

    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类,就作为实体类

    namespace WebUtils {      
        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 > 0) {      
                for (int i = 0; i < rows.Count; i++) {      
                    sb.Append("{");      
                    foreach (string key in rows[i].Keys) {      
                        if (rows[i][key] is ValueType) {      
                            sb.AppendFormat("/"{0}/":{1},", key, rows[i][key]);      
                        } else {      
                            sb.AppendFormat("/"{0}/":/"{1}/",", key, rows[i][key]);      
                        }      
                    }      
                    sb.Remove(sb.Length - 1, 1);      
                    sb.Append("}");      
                    if (i != rows.Count - 1) {      
                        sb.Append(",");      
                    }      
                }      
            }      
            sb.Append("],");      
            sb.Append("/"columns/":[");      
            //添加列      
            if (columns != null && columns.Count > 0) {      
                for (int i = 0; i < columns.Count; i++) {      
                    sb.Append(columns[i].ConvertToJson());      
                    if (i != columns.Count - 1) {      
                        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/":/"{0}/",", field);      
            sb.AppendFormat("/"width/":{0},", width);      
            sb.AppendFormat("/"align/":/"{0}/",", align);      
            sb.AppendFormat("/"title/":/"{0}/",", title);      
            sb.Remove(sb.Length - 1, 1);      
            sb.Append("}");      
            String str = sb.ToString();      
            return str;      
        }      
    }

    3.后台获取数据(一般处理程序)

    public void GetUserList2(HttpContext context) {      
         List<User> userList = new List<User>();      
         for (int i = 0; i < 10; i++) {      
             userList.Add(new User {      
                 Name = "Name" + (i + 1),      
                 Age = 20 + i,      
                 Gender = i % 3 == 0 ? "男" : "女",      
                 Hobby = i.ToString()      
             });      
         }      
         List<JColumn> colList = new List<JColumn>() {      
             new JColumn{field="Name",title="姓名",width=100,align="center"},      
             new JColumn{field="Age",title="年龄",width=100,align="center"},      
             new JColumn{field="Gender",title="性别",width=50,align="center"},      
             new JColumn{field="Hobby",title="兴趣",width=150,align="center"},      
         };      
         JDataGrid dg = new JDataGrid {      
             total=20,      
             rows=JDataGrid.ConvertRows(userList),      
             columns=colList,      
         };      
         string strJson = dg.ConvertToJson();      
         HttpResponse response = context.Response;      
         response.ContentType = "text/json";      
         response.Write(strJson);      
     }    

    对比前面的方法,显示代码通用多了

  • 相关阅读:
    vue从详情页回到列表页,停留在之前的tab上
    vue-touch监听手指左滑右滑事件
    vue事件代理
    vue通过ref获取组件渲染后的dom(this.$refs.xxxRef.$el)
    vue水印-第二种方法:通过指令
    # 有时候代码超时
    # 今天的leetcode1268又用上了二分搜索。
    # linux命令小常识
    # 大家好
    今天尝试配置maven的时候
  • 原文地址:https://www.cnblogs.com/xuhn/p/2868662.html
Copyright © 2020-2023  润新知