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对象的
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 }
如果你显示不出来，那么就参考下面的格式，一定要符合这种格式，一定要符合这种格式，一定要符合这种格式，重要事情说三遍
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数据的更多相关文章
- jquery easyui datagrid 动态 加载列
实现方式: 首先根据输入的sql语句获得相关的列名称返回给前台,然后在datagrid中动态加载列,接着根据查询条件(包括sql语句)获取相关的记录返回给前台用于填充datagrid.从而实现类似or ...
- easyui datagrid 动态加载数据 渲染问题，表格错位问题
$('#dg').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',width:100}, {fie ...
- EasyUI datagrid 动态加载表头和数据
首先返回到页面的需要是JSON数据: 第一步: 遍历表头,插入到array中 for (var i = 0; i < jsonObj.title.length; i++) { //把返回的数据封 ...
- 【第一篇】说说MVC+EF easyui dataGrid 动态加载分页表格
首先上javascript的代码 <script type="text/javascript"> $(function () { LoadGrid(); }) //加载 ...
- 转 -- MVC+EF easyui dataGrid 动态加载分页表格
首先上javascript的代码 <script type="text/javascript"> $(function () { LoadGrid(); }) //加载 ...
- easyui combobox 动态加载数组数据
怕自己忘了,记录下来以后用方便 html部分 <input id="rzcode" name="businesItemId" style="wi ...
- MVC4中EasyUI Tree异步加载JSON数据生成树
1,首先构造tree接受的格式化数据结构MODEL /// <summary> /// 定义EasyUI树的相关数据,方便控制器生成Json数据进行传递 /// </summar ...
- geotrellis使用（二十三）动态加载时间序列数据
目录 前言 实现方法 总结 一.前言 今天要介绍的绝对是华丽的干货.比如我们从互联网上下载到了一系列(每天或者月平均等)的MODIS数据,我们怎么能够对比同一区域不同时间的数据情况,采用 ...
- OpenLayers学习笔记（十）— 动态加载JSON数据模拟航迹线
在openlayers 3 上,加载本地json数据,动态绘制航迹线,以飞机当前位置为地图中心,此例子是模拟DEMO 本文链接:动态加载JSON数据模拟航迹线 作者:狐狸家的鱼 GitHub:八至 前 ...
随机推荐
- C++笔记（0）——判定一个数字是否是素数
博主之前使用的编程语言是Python,但是这门语言的效率比较低(通常,不优化的情况下,但是即便如此我还是偏爱Python),而且博主打算参加PAT考试(真正的原因),及博主打算顺便深入学习下机器学习框 ...
- vmware中的虚拟linux配置多块网卡
在使用vm上运行多个linux系统,来模拟LVS负载均衡实验中.需要在lvs服务器中设置两块网卡,发现可以在vm给虚拟机添加任意多个网卡. 方法: 不要启动Linux,在上面的菜单项中选择: “VM— ...
- day 03 int bool str (索引，切片) for 循环
基础数类型总览 10203 123 3340 int +- * / 等等 '今天吃了没?' str 存储少量的数据,+ *int 切片, 其他操作方法 True False bool 判断真假 [12 ...
- 2015 四川省赛 C Censor（哈希 | KMP）
模式串为子串 KMP /* @author : victor */ #include <bits/stdc++.h> using namespace std; typedef long l ...
- vi命令（待更新）
第一部分: 0:光标到本行行首$:光标到本行行尾 ^:本行第一个非blank的位置g_:本行最后一个非blank的位置 a:光标后插入(insert是光标前插入字符)o:当前行后加入新行O:当前行钱加 ...
- Bashed -- hack the box
Introduction Target: 10.10.10.68 (OS: Linux) Kali linux: 10.10.16.44 Information Enumeration Firstly ...
- 简单了解 node net 模块
简单了解 node net 模块 文章记录了对net 模块的简单理解分析. net模块 简单使用 net.Server 类 net.Socket 类 总结 1.1 net模块 Node.js 的 Ne ...
- JavaScript运算符及语句
ECMAScript 算术运算符 加,减,乘,除,-号可以表示负号 递增(++),递减(--) 两种写法:例:i++,i--,++i,--i,区别是运算符放在前面是先计算后输出,运算符放在后面先输出再 ...
- 【30分钟学完】canvas动画|游戏基础(7)：动量守恒与多物体碰撞
前言 一路沿着本系列教程学习的朋友可能会发现,前面教程中都尽量避免提及质量的概念,很多运动概念也时刻提醒大家这不是真实的物体运动.因为真实的物体运动其实跟质量都是密不可分的,而且质量的引入自然必须提及 ...
- pt-config-diff的使用记录
pt-config-diff的使用记录 pt-config-diff功能:比较差异两套库配置差不多,性能就是不一样,无奈之举,去比对数据库配置是否相同. 运行的MySQL和运行的MySQL做对比 [r ...