1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>art</title>
5 </head>
6 <script type="text/javascript" src="template-web.js"></script>
7 <body>
8 <div id="content"></div>
9 <script id="table" type="text/html">
10 <table border="1" cellspacing="0" cellpadding="0">
11 <!-- value是值 i是索引 -->
12 {{each datas value i}}
13 <tr>
14 <td width="40%">{{types[value.type]}}</td>
15 <td>
16 <!--循环嵌套 val是值 j是索引 -->
17 {{each attrs val j}}
18 <!-- 条件判断 -->
19 {{if value[val.code]}}
20 <span>{{val.name}}：</span><span class="projectColor termInfoSpan" unit="">{{value[val.code]}}</span></br>
21 {{/if}}
22 {{/each}}
23 </td>
24 </tr>
25 {{/each}}
26 </table>
27
28 </script>
29
30 <script type="text/javascript">
31
32 // 模拟后台返回数据
33 var datas = [{
34 orderNum: "0",
35 type: "1",
36 version: "version1",
37 mac: "mac"
38 }, {
39 orderNum: "1",
40 type: "2",
41 version: "version2"
42 }, {
43 orderNum: "2",
44 type: "3",
45 version: "version3"
46 }, {
47 orderNum: "3",
48 type: "4",
49 version: "version4",
50 cellAH: "9000",
51 cellNum: "10"
52 }, {
53 orderNum: "4",
54 type: "5",
55 version: "version5"
56 }, {
57 orderNum: "5",
58 type: "6",
59 version: "version6"
60 }, {
61 orderNum: "6",
62 type: "7",
63 version: "version7"
64 }, {
65 orderNum: "7",
66 type: "8",
67 version: "version8"
68 }, {
69 orderNum: "8",
70 type: "9",
71 version: "version9"
72 }, {
73 orderNum: "9",
74 type: "10",
75 version: "version10"
76 }, {
77 orderNum: "10",
78 type: "11",
79 version: "version11"
80 }];
81 // 所有可能出现的属性
82 var attrs = [
83 {name:"Attr1",code:"mac"},
84 {name:"Attr2",code:"version"},
85 {name:"Attr3",code:"cellAH"},
86 {name:"Attr4",code:"cellNum"}
87 ];
88 // type值对应的设备类型
89 var types = {
90 "1":"type1",
91 "2":"type2",
92 "3":"type3",
93 "4":"type4",
94 "5":"type5",
95 "6":"type6",
96 "7":"type7",
97 "8":"type8",
98 "9":"type9",
99 "10":"type10",
100 "11":"type11"
101 }
102 var data = {
103 datas:datas,
104 attrs:attrs,
105 types:types
106 }
107
108 var html = template('table', data);
109 document.getElementById('content').innerHTML = html;
110 </script>
111 </body>
112 </html>
