根据ListMap返回的Json值绘制HtmlTable

摘要：

1、一个通过Json绘制HTML表格的简单样例

2、关键代码是：Object.keys(nodeItem); 获得Json节点的key项

 

原文链接：

http://www.lookdaima.com/page/docItemDetail.html?id=1f12eb4d-88af-4e37-afa3-a28d13ff3e85 

 

界面效果：

实现代码：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>根据ListMap返回的值绘制HtmlTable</title>
  6     <link href="/themes/blank/css/main.css?v=201807311" rel="stylesheet" media="all" />
  7     <script language="javascript" type="text/javascript" src="/themes/blank/js/jquery-1.8.3.min.js"></script>
  8 
  9 </head>
 10 <body>
 11     <div id="div_Html"></div>
 12 
 13 </body>
 14 </html>
 15 
 16 <script language="javascript" type="text/javascript">
 17 
 18 
 19     // 构建HTML表格 //
 20     function BuildTable(jsonData) {
 21         if (jsonData == null)
 22             return "";
 23 
 24         var iLen = jsonData.length;
 25 
 26         if (iLen == 0) {
 27             return "";
 28         }
 29 
 30         var kA = null;
 31         var vA = null;
 32         var nodeItem = null;
 33 
 34         // 通过节点1获得Key（打印输出标题）
 35         nodeItem = jsonData[0];
 36         kA = Object.keys(nodeItem);
 37 
 38         var kLen = kA.length;
 39         var vLen = 0;
 40         var theResult = "";
 41         var i = 0;
 42         var j = 0;
 43         var theText = null;
 44 
 45 
 46         theResult += "<table class=\"slx-oneline\" style=\"width:99%;\">" + '\r\n';
 47         theResult += "<tbody>" + '\r\n';
 48 
 49         // 输出标题行 //
 50         theResult += "<tr>" + '\r' + '\n';
 51 
 52         for (j = 0; j < kLen; ++j) {
 53             theResult += "<th>";
 54 
 55             theResult += kA[j];
 56 
 57             theResult += "</th>";
 58 
 59         }
 60 
 61         theResult += "</tr>" + '\r' + '\n';
 62 
 63         // 输出内容行 //
 64         var minLen = 0;
 65 
 66         for (i = 0; i < iLen; ++i) {
 67 
 68             theResult += "<tr>" + '\r' + '\n';
 69 
 70             nodeItem = jsonData[i];
 71 
 72             // 获得Value值 //
 73             vA = Object.values(nodeItem);
 74             vLen = vA.length;
 75 
 76             // 保护代码 //
 77             if (kLen <= vLen) {
 78                 minLen = kLen;
 79             }
 80             else {
 81                 minLen = vLen;
 82             }
 83 
 84 
 85             for (j = 0; j < minLen ; ++j) {
 86                 theResult += "<td>";
 87 
 88                 theResult += vA[j];
 89 
 90                 theResult += "</td>";
 91 
 92             }
 93 
 94             theResult += "</tr>" + '\r' + '\n';
 95         }
 96 
 97 
 98         theResult += "</tbody>" + '\r\n';
 99         theResult += "</table>" + '\r\n';
100 
101 
102         return theResult;
103     }
104 
105     // 绘制HTML //
106     function BuildTableHtml(jsonData)
107     {
108         var tableHtml = BuildTable(jsonData);
109 
110         $("#div_Html").html(tableHtml);
111     }
112 
113     function DrawTable()
114     {
115         // 接口地址 //
116         var ajaxUrl = "/ctrl/demo/poidemo/listMapHrUserEducation";
117 
118         $.ajax({
119             cache: false,
120             async: true,
121             url: ajaxUrl,
122             type: 'get',
123             success: function(theData) {
124                 if (theData == null) {
125                     alert("加载失败");
126                     return;
127                 }
128 
129                 if(theData.code != "1"){
130                     alert(theData.msg);
131                     return;
132                 }
133 
134                 BuildTableHtml(theData.data);
135             }
136         });
137 
138     }
139 
140 
141 
142 $(function() {
143 
144     DrawTable();
145 
146 });
147 
148 </script>
View Code

 

Json数据样例：

  1 {
  2     "code": "1",
  3     "msg": "",
  4     "data": [{
  5         "SERIAL": 1,
  6         "UPDATE_USERID": "张三",
  7         "CODE": "primary",
  8         "INSERT_TIME": 1518150824000,
  9         "INSERT_USERID": "张三",
 10         "GUID": "a9ec1dc0e5c74a82b8d92b9b1186cf46",
 11         "UPDATE_TIME": 1518150824000,
 12         "REMARK": null,
 13         "VALUE_LEVEL": 1,
 14         "NAME": "小学"
 15     }, {
 16         "SERIAL": 2,
 17         "UPDATE_USERID": "张三",
 18         "CODE": "junior",
 19         "INSERT_TIME": 1518150861000,
 20         "INSERT_USERID": "张三",
 21         "GUID": "7ed95803f12b41dc9b45516eeb6005f8",
 22         "UPDATE_TIME": 1518150861000,
 23         "REMARK": null,
 24         "VALUE_LEVEL": 1,
 25         "NAME": "初中"
 26     }, {
 27         "SERIAL": 3,
 28         "UPDATE_USERID": "张三",
 29         "CODE": "senior",
 30         "INSERT_TIME": 1518150892000,
 31         "INSERT_USERID": "张三",
 32         "GUID": "773dd6af32634e4d8ca744d59934875d",
 33         "UPDATE_TIME": 1518150892000,
 34         "REMARK": null,
 35         "VALUE_LEVEL": 1,
 36         "NAME": "高中"
 37     }, {
 38         "SERIAL": 4,
 39         "UPDATE_USERID": "张三",
 40         "CODE": " junior_college",
 41         "INSERT_TIME": 1518150955000,
 42         "INSERT_USERID": "张三",
 43         "GUID": "4c985a0e00c74ef4a9c7ec1cf1033e51",
 44         "UPDATE_TIME": 1518150955000,
 45         "REMARK": null,
 46         "VALUE_LEVEL": 1,
 47         "NAME": "大专"
 48     }, {
 49         "SERIAL": 5,
 50         "UPDATE_USERID": "张三",
 51         "CODE": "regular_college",
 52         "INSERT_TIME": 1518151004000,
 53         "INSERT_USERID": "张三",
 54         "GUID": "75fc68ae9f3640719d664ec298f132b4",
 55         "UPDATE_TIME": 1518151004000,
 56         "REMARK": null,
 57         "VALUE_LEVEL": 1,
 58         "NAME": "本科"
 59     }, {
 60         "SERIAL": 6,
 61         "UPDATE_USERID": "张三",
 62         "CODE": "master",
 63         "INSERT_TIME": 1518151043000,
 64         "INSERT_USERID": "张三",
 65         "GUID": "0bd8a8e04aab4429b285088ca35c7d6d",
 66         "UPDATE_TIME": 1518151043000,
 67         "REMARK": null,
 68         "VALUE_LEVEL": 1,
 69         "NAME": "硕士"
 70     }, {
 71         "SERIAL": 7,
 72         "UPDATE_USERID": "张三",
 73         "CODE": "doctor",
 74         "INSERT_TIME": 1518151070000,
 75         "INSERT_USERID": "张三",
 76         "GUID": "7a7518bf58904fc8b2da89b20694d7b7",
 77         "UPDATE_TIME": 1518151070000,
 78         "REMARK": null,
 79         "VALUE_LEVEL": 1,
 80         "NAME": "博士"
 81     }, {
 82         "SERIAL": 8,
 83         "UPDATE_USERID": "张三",
 84         "CODE": "technical_secondary",
 85         "INSERT_TIME": 1518150895000,
 86         "INSERT_USERID": "张三",
 87         "GUID": "a9ec1dc0e5c74a82b8d92b9b1986cf46",
 88         "UPDATE_TIME": 1518150895000,
 89         "REMARK": null,
 90         "VALUE_LEVEL": 1,
 91         "NAME": "中专"
 92     }, {
 93         "SERIAL": 3,
 94         "UPDATE_USERID": "张三",
 95         "CODE": "test",
 96         "INSERT_TIME": 1523952454000,
 97         "INSERT_USERID": "张三",
 98         "GUID": "bc37acdca9094413b02d199aed003de9",
 99         "UPDATE_TIME": 1523952454000,
100         "REMARK": "无",
101         "VALUE_LEVEL": 1,
102         "NAME": "测试数据"
103     }]
104 }
View Code

 

posted @ 2021-02-05 14:16  看代码`lookdaima.com  阅读(109)  评论(0)  编辑  收藏  举报