最近做一个项目，要求是两张张表可能查找出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

EasyUI datagrid动态加载json数据的更多相关文章

  1. jquery easyui datagrid 动态 加载列

    实现方式: 首先根据输入的sql语句获得相关的列名称返回给前台,然后在datagrid中动态加载列,接着根据查询条件(包括sql语句)获取相关的记录返回给前台用于填充datagrid.从而实现类似or ...

  2. easyui datagrid 动态加载数据 渲染问题，表格错位问题

    $('#dg').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',width:100}, {fie ...

  3. EasyUI datagrid 动态加载表头和数据

    首先返回到页面的需要是JSON数据: 第一步: 遍历表头,插入到array中 for (var i = 0; i < jsonObj.title.length; i++) { //把返回的数据封 ...

  4. 【第一篇】说说MVC+EF easyui dataGrid 动态加载分页表格

    首先上javascript的代码 <script type="text/javascript"> $(function () { LoadGrid(); }) //加载 ...

  5. 转 -- MVC+EF easyui dataGrid 动态加载分页表格

    首先上javascript的代码 <script type="text/javascript"> $(function () { LoadGrid(); }) //加载 ...

  6. easyui combobox 动态加载数组数据

    怕自己忘了,记录下来以后用方便 html部分 <input id="rzcode" name="businesItemId" style="wi ...

  7. MVC4中EasyUI Tree异步加载JSON数据生成树

      1,首先构造tree接受的格式化数据结构MODEL /// <summary> /// 定义EasyUI树的相关数据,方便控制器生成Json数据进行传递 /// </summar ...

  8. geotrellis使用（二十三）动态加载时间序列数据

    目录 前言 实现方法 总结 一.前言        今天要介绍的绝对是华丽的干货.比如我们从互联网上下载到了一系列(每天或者月平均等)的MODIS数据,我们怎么能够对比同一区域不同时间的数据情况,采用 ...

  9. OpenLayers学习笔记（十）— 动态加载JSON数据模拟航迹线

    在openlayers 3 上,加载本地json数据,动态绘制航迹线,以飞机当前位置为地图中心,此例子是模拟DEMO 本文链接:动态加载JSON数据模拟航迹线 作者:狐狸家的鱼 GitHub:八至 前 ...

随机推荐

  1. PHP 识别获取身份证号代表的信息

    18位的身份证号每一位都代表什么 例如:110102197810272321 echo substr(110102197810272321,0,2)."<br>"; / ...

  2. mysql 表相关操作(1)

    查询语句 select * from t_deptselect empno,ename,sal from t_emp select    empno,   sal * 12 as "inco ...

  3. 面试必备：GET和POST的用法和区别

    版权声明一:本文为博主原创文章,转载请附上原文出处链接和本声明.版权声明二:本网站的所有作品会及时更新,欢迎大家阅读后发表评论,以利作品的完善.版权声明三:对不遵守本声明或其他违法.恶意使用本网内容者 ...

  4. 机器学习及scikit-learn

    一.机器学习以及scikit-learn 1. 机器学习基本步骤: (1)定义一系列函数  =>   (2)定义函数的优劣  =>  (3)选择最优函数 2.什么是scikit-learn ...

  5. JVM常用虚拟机命令汇总

    title: JVM常用虚拟机命令汇总 comments: false date: 2019-07-22 11:45:33 description: 总结一下常用的JVM虚拟机启动命令. catego ...

  6. CSS高度坍塌问题的原因以及解决办法

    原因: 在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高.但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷. ...

  7. Struts2.5以上版本There is no Action mapped for namespace [/] and action name [userAction_login] associated with context path []

    分析:Struts2在2.5版本后添加strict-method-invocation(严格方法访问),默认为true,不能使用动态方法调用功能,故需设为false struts.xml设置如下: & ...

  8. Centos7下lvs负载均衡lvs-tun模式配置

    一.架构 director:172.28.18.69 vip:172.28.18.70 real server1:172.28.18.71 real server2:172.28.18.78 二.两台 ...

  9. 【HDU3308】LCIS

    题目大意:维护一个长度为 N 的序列,支持单点修改,区间查询最长连续上升子序列的长度. 题解: 线段树维护一段区间左端点开始的 LCIS 长度,右端点开始的 LCIS 长度以及区间最优解.考虑进行合并 ...

  10. 负载均衡（三）Nginx的安装配置

    linux系统为Centos 64位 一.安装 [root@cuiqq local]# mkdir /usr/local/nginx [root@cuiqq local]# cd /usr/local ...