• EasyUI datagrid动态加载json数据


    最近做一个项目,要求是两张张表可能查找出10多种不同的结果集。

    如果想只用一个表格就把全部的结果不同的显示出来那么就肯定不同使用固定的字段名字,要通过动态加载后台返回来的数据把它显示出来就必须动态加载column

    具体看下面

    1 <!DOCTYPE html>
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     5     <link href="../Script/jquery-easyui-1.4.4/themes/default/easyui.css" rel="stylesheet" />
     6     <link href="../Script/jquery-easyui-1.4.4/themes/icon.css" rel="stylesheet" />
     7     <script src="../Script/jquery-1.8.2.js"></script>
     8     <script src="../Script/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
     9 
    10     <script type="text/javascript">
    11         $(function () {
    12             //动态加载标题和数据
    13             $.ajax({
    14                 url: "../ashx/GetDataList.ashx",
    15                 type: "post",
    16                 dataType: "json",
    17                 success: function (data) {
    18                     var msg = $.parseJSON(data);
    19                     $("#dg").datagrid({
    20                         columns: [data.title]    //动态取标题
    21                     });
    22                     $("#dg").datagrid("loadData", data.rows);  //动态取数据
    23                 }
    24             });
    25         });
    26     </script>
    27     <title></title>
    28 </head>
    29 <body>
    30     <table id="dg" data-options="
    31 rownumbers:true,
    32 singleSelect:true,
    33 autoRowHeight:false,
    34 pagination:true,
    35 resizeHandle:'right'">
    36         <thead>
    37             <tr></tr>
    38         </thead>
    39     </table>
    40 </body>
    41 </html>
    复制代码
     1 <!DOCTYPE html>
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     5     <link href="../Script/jquery-easyui-1.4.4/themes/default/easyui.css" rel="stylesheet" />
     6     <link href="../Script/jquery-easyui-1.4.4/themes/icon.css" rel="stylesheet" />
     7     <script src="../Script/jquery-1.8.2.js"></script>
     8     <script src="../Script/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>
     9 
    10     <script type="text/javascript">
    11         $(function () {
    12             //动态加载标题和数据
    13             $.ajax({
    14                 url: "../ashx/GetDataList.ashx",
    15                 type: "post",
    16                 dataType: "json",
    17                 success: function (data) {
    18                     var msg = $.parseJSON(data);
    19                     $("#dg").datagrid({
    20                         columns: [data.title]    //动态取标题
    21                     });
    22                     $("#dg").datagrid("loadData", data.rows);  //动态取数据
    23                 }
    24             });
    25         });
    26     </script>
    27     <title></title>
    28 </head>
    29 <body>
    30     <table id="dg" data-options="
    31 rownumbers:true,
    32 singleSelect:true,
    33 autoRowHeight:false,
    34 pagination:true,
    35 resizeHandle:'right'">
    36         <thead>
    37             <tr></tr>
    38         </thead>
    39     </table>
    40 </body>
    41 </html>
    复制代码

    后台代码我只写出关键的部分,在数据库查询出一个DataTable传入,最后直接返回就是json对象


    1 /// <summary> 2 /// 把DataTable数据转换为Json格式 3 /// </summary> 4 /// <param name="dt">传入DataTable数据</param> 5 /// <returns></returns> 6 public string DataTableToJson(DataTable dt, int pageTotal) 7 { 8 StringBuilder jsonBuilder = new StringBuilder(); 9 jsonBuilder.Append("{"total""); 10 jsonBuilder.Append(":"); 11 jsonBuilder.Append(pageTotal); 12 jsonBuilder.Append(","rows"); 13 jsonBuilder.Append("":["); 14 for (int i = 0; i < dt.Rows.Count; i++) 15 { 16 jsonBuilder.Append("{"); 17 for (int j = 0; j < dt.Columns.Count; j++) 18 { 19 jsonBuilder.Append("""); 20 jsonBuilder.Append(dt.Columns[j].ColumnName); 21 jsonBuilder.Append("":""); 22 jsonBuilder.Append(dt.Rows[i][j].ToString()); 23 jsonBuilder.Append("","); 24 } 25 jsonBuilder.Remove(jsonBuilder.Length - 1, 1); 26 jsonBuilder.Append("},"); 27 } 28 jsonBuilder.Remove(jsonBuilder.Length - 1, 1); 29 jsonBuilder.Append("],"); 30 jsonBuilder.Append(""title"); 31 jsonBuilder.Append(dt.TableName); 32 jsonBuilder.Append("":["); 33 //这是循环获取列名称 34 for (int n = 0; n < dt.Columns.Count; n++) 35 { 36 jsonBuilder.Append("{"); 37 jsonBuilder.Append(""field"); 38 jsonBuilder.Append("":""); 39 jsonBuilder.Append(dt.Columns[n].ColumnName); 40 jsonBuilder.Append("","); 41 jsonBuilder.Append(""title"); 42 jsonBuilder.Append("":""); 43 jsonBuilder.Append(dt.Columns[n].ColumnName); 44 jsonBuilder.Append("""); 45 jsonBuilder.Append("},"); 46 } 47 jsonBuilder.Remove(jsonBuilder.Length - 1, 1); 48 jsonBuilder.Append("},"); 49 50 jsonBuilder.Remove(jsonBuilder.Length - 2, 2); 51 jsonBuilder.Append("]"); 52 jsonBuilder.Append("}"); 53 return jsonBuilder.ToString(); 54 }
    复制代码
     1         /// <summary>
     2         /// 把DataTable数据转换为Json格式
     3         /// </summary>
     4         /// <param name="dt">传入DataTable数据</param>
     5         /// <returns></returns>
     6         public string DataTableToJson(DataTable dt, int pageTotal)
     7         {
     8             StringBuilder jsonBuilder = new StringBuilder();
     9             jsonBuilder.Append("{"total"");
    10             jsonBuilder.Append(":");
    11             jsonBuilder.Append(pageTotal);
    12             jsonBuilder.Append(","rows");
    13             jsonBuilder.Append("":[");
    14             for (int i = 0; i < dt.Rows.Count; i++)
    15             {
    16                 jsonBuilder.Append("{");
    17                 for (int j = 0; j < dt.Columns.Count; j++)
    18                 {
    19                     jsonBuilder.Append(""");
    20                     jsonBuilder.Append(dt.Columns[j].ColumnName);
    21                     jsonBuilder.Append("":"");
    22                     jsonBuilder.Append(dt.Rows[i][j].ToString());
    23                     jsonBuilder.Append("",");
    24                 }
    25                 jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
    26                 jsonBuilder.Append("},");
    27             }
    28             jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
    29             jsonBuilder.Append("],");
    30             jsonBuilder.Append(""title");
    31             jsonBuilder.Append(dt.TableName);
    32             jsonBuilder.Append("":[");
    33             //这是循环获取列名称
    34             for (int n = 0; n < dt.Columns.Count; n++)
    35             {
    36                 jsonBuilder.Append("{");
    37                 jsonBuilder.Append(""field");
    38                 jsonBuilder.Append("":"");
    39                 jsonBuilder.Append(dt.Columns[n].ColumnName);
    40                 jsonBuilder.Append("",");
    41                 jsonBuilder.Append(""title");
    42                 jsonBuilder.Append("":"");
    43                 jsonBuilder.Append(dt.Columns[n].ColumnName);
    44                 jsonBuilder.Append(""");
    45                 jsonBuilder.Append("},");
    46             }
    47             jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
    48             jsonBuilder.Append("},");
    49 
    50             jsonBuilder.Remove(jsonBuilder.Length - 2, 2);
    51             jsonBuilder.Append("]");
    52             jsonBuilder.Append("}");
    53             return jsonBuilder.ToString();
    54         }
    复制代码

    如果你显示不出来,那么就参考下面的格式,一定要符合这种格式,一定要符合这种格式,一定要符合这种格式,重要事情说三遍


    1 {"total":8,"rows":[ 2 {"id":"101","name":"正义无限公司","coding":"01","abbreviation":"正义","industryRegistrationId":"1123456","corporation":"张三"}, 3 {"id":"101","name":"正义无限公司","coding":"01","abbreviation":"正义","industryRegistrationId":"1123456","corporation":"张三"}, 4 {"id":"101","name":"正义无限公司","coding":"01","abbreviation":"正义","industryRegistrationId":"1123456","corporation":"张三"}, 5 {"id":"101","name":"正义无限公司","coding":"01","abbreviation":"正义","industryRegistrationId":"1123456","corporation":"张三"}, 6 {"id":"101","name":"正义无限公司","coding":"01","abbreviation":"正义","industryRegistrationId":"1123456","corporation":"张三"}, 7 {"id":"101","name":"正义无限公司","coding":"01","abbreviation":"正义","industryRegistrationId":"1123456","corporation":"张三"}, 8 {"id":"101","name":"正义无限公司","coding":"01","abbreviation":"正义","industryRegistrationId":"1123456","corporation":"张三"}, 9 {"id":"101","name":"正义无限公司","coding":"01","abbreviation":"正义","industryRegistrationId":"1123456","corporation":"张三"} 10 ], 11 "title":[ 12 { 13 "field":"id", 14 "title":"公司自编码" 15 }, 16 { 17 "field":"name", 18 "title":"公司名称" 19 }, 20 { 21 "field":"coding", 22 "title":"编码" 23 }, 24 { 25 "field":"abbreviation", 26 "title":"公司简称" 27 }, 28 { 29 "field":"industryRegistrationId", 30 "title":"工商注册号" 31 }, 32 { 33 "field":"corporation", 34 "title":"公司法人" 35 } 36 ] 37 }
    复制代码
     1 {"total":8,"rows":[
     2   {"id":"101","name":"正义无限公司","coding":"01","abbreviation":"正义","industryRegistrationId":"1123456","corporation":"张三"},
     3   {"id":"101","name":"正义无限公司","coding":"01","abbreviation":"正义","industryRegistrationId":"1123456","corporation":"张三"},
     4   {"id":"101","name":"正义无限公司","coding":"01","abbreviation":"正义","industryRegistrationId":"1123456","corporation":"张三"},
     5   {"id":"101","name":"正义无限公司","coding":"01","abbreviation":"正义","industryRegistrationId":"1123456","corporation":"张三"},
     6   {"id":"101","name":"正义无限公司","coding":"01","abbreviation":"正义","industryRegistrationId":"1123456","corporation":"张三"},
     7   {"id":"101","name":"正义无限公司","coding":"01","abbreviation":"正义","industryRegistrationId":"1123456","corporation":"张三"},
     8   {"id":"101","name":"正义无限公司","coding":"01","abbreviation":"正义","industryRegistrationId":"1123456","corporation":"张三"},
     9   {"id":"101","name":"正义无限公司","coding":"01","abbreviation":"正义","industryRegistrationId":"1123456","corporation":"张三"}
    10 ],
    11   "title":[
    12     {
    13       "field":"id",
    14       "title":"公司自编码"
    15     },
    16     {
    17       "field":"name",
    18       "title":"公司名称"
    19     },
    20     {
    21       "field":"coding",
    22       "title":"编码"
    23     },
    24     {
    25       "field":"abbreviation",
    26       "title":"公司简称"
    27     },
    28     {
    29       "field":"industryRegistrationId",
    30       "title":"工商注册号"
    31     },
    32     {
    33       "field":"corporation",
    34       "title":"公司法人"
    35     }
    36   ]
    37 }
    复制代码


    我是是参考这个大神做的,我也是弄很久不行就是因为json格式不对。

    http://my.oschina.net/missGu/blog/393069?fromerr=ltaovswk

  • 相关阅读:
    tomcat调优
    使用Docker部署Spring Boot项目
    java配置ueditor中解决“未找到上传文件”错误提示
    java.lang.NoClassDefFoundError: org/aspectj/weaver/reflect/ReflectionWorld$ReflectionWorldException
    spring01
    android中的wrap_content,match_parent, fill_parent
    RPC和http
    Failed to read artifact descriptor for xxx
    Error processing condition on org.springframework.boot.autoconfigure.thymeleaf.ThymeleafAutoConfiguration$ThymeleafWebMvcConfiguration.resourceUrlEncodingFilter
    springboot的自动配置
  • 原文地址:https://www.cnblogs.com/zhuyeshen/p/11430543.html
Copyright © 2020-2023  润新知