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>

前台View Code

后台代码我只写出关键的部分，在数据库查询出一个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         }

后台View Code

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

 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格式View Code

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

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

转载于:https://www.cnblogs.com/gscq073240/articles/6900649.html

EasyUI datagrid动态加载json数据相关推荐

使用EasyUI Tree异步加载JSON数据生成树
这几天因为工作需要,要做一个支持无限级的菜单. 我也是菜鸟一只,能想到的东西不多,所以用了Easy UI的tree组件. 不得不说,easyui确实很强大. 因为是无限级菜单,数据量可能有点大,所以考 ...
EasyUI datagrid 动态加载表头和数据
首先返回到页面的需要是JSON数据: 第一步: 遍历表头,插入到array中 for (var i = 0; i < jsonObj.title.length; i++) {//把返回的数据封装 ...
MVC4中EasyUI Tree异步加载JSON数据生成树
1,首先构造tree接受的格式化数据结构MODEL /// <summary> /// 定义EasyUI树的相关数据,方便控制器生成Json数据进行传递 /// </summar ...
ceisum 加载geojson,使用 Cesium 动态加载 GeoJSON 数据
前言需求是这样的,我需要在地图中显示 08 年到现在的地震情况,地震都是发生在具体的时间点的,那么问题就来了,如何实现地震情况按照时间动态渲染而不是一次全部加载出来. 一. 方案分析这里面牵扯到两 ...
jquery table ajax,JQuery Ajax动态加载Table数据的实例讲解
我们在jsp定义一个select和一个table,要求实现根据select的选值,动态加载table数据. table第一次加载数据的function定义如下: function loadData() ...
Java实现动态加载页面_[Java教程]动态加载页面数据的小工具 javascript + jQuery （持续更新）...
[Java教程]动态加载页面数据的小工具 javascript + jQuery (持续更新) 0 2014-05-07 18:00:06 使用该控件,可以根据url,参数,加载html记录模板(包含 ...
html select ajax,AJAX 动态加载后台数据绑定select的方法
直接上代码是可以用的,后台代码我就不贴了,我相信后台代码大家都会,直接返回json数据,我是前端比较差的,所以喜欢把每次不会的全部记起来 html代码 //下拉框数据动态加载 js代码 $.ajax ...
教你用Python爬取动态加载的数据
例子1:爬取豆瓣电影中的电影详情数据 url:https://movie.douban.com/ 1.什么是动态加载的数据: 我们通过requests模块进行数据爬取无法每次都是可见即可得,有些数据是 ...
vue动态跟新layui的select_vue+layui实现select动态加载后台数据的例子
vue+layui实现select动态加载后台数据的例子发布时间:2020-09-18 22:51:36 来源:脚本之家阅读:85 作者:qq_26814945 刚开始由于layui form渲染 ...

EasyUI datagrid动态加载json数据

EasyUI datagrid动态加载json数据相关推荐

最新文章

热门文章