EasyUI datagrid動態加載json數據

時間 2019-11-21

標籤 easyui datagrid 動態加載 json 數據欄目 JavaScript 简体版

原文原文鏈接

最近作一個項目，要求是兩張張表可能查找出10多種不一樣的結果集。javascript

若是想只用一個表格就把所有的結果不一樣的顯示出來那麼就確定不一樣使用固定的字段名字，要經過動態加載後臺返回來的數據把它顯示出來就必須動態加載columncss

具體看下面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>

前臺View Code

後臺代碼我只寫出關鍵的部分，在數據庫查詢出一個DataTable傳入，最後直接返回就是json對象的java

 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

若是你顯示不出來，那麼就參考下面的格式，必定要符合這種格式，必定要符合這種格式，必定要符合這種格式，重要事情說三遍jquery

 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 }