jquery-jtemplates.js模板应用

　　jquery-jtemplates.js下载地址：https://gitee.com/nelsonlei/jquery-jtemplates.jsMoBanYingYong
  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4   <meta charset="UTF-8">
  5   <title></title>
  6   <script type="text/javascript" src="jquery.min.js"></script>
  7   <script type="text/javascript" src="jquery-jtemplates.js"></script>
  8   <style type="text/css">
  9     .container {
 10       width: 1000px;
 11       height: 600px;
 12       margin: 0 auto;
 13     }
 14 
 15     .template {
 16       display: none;
 17     }
 18 
 19     table {
 20       background-color: #fff;
 21     }
 22 
 23     table tr th {
 24       padding: 8px;
 25       border-bottom: 1px solid #eee;
 26     }
 27 
 28     table tr td {
 29       padding: 10px;
 30       border-bottom: 1px solid #eee;
 31     }
 32   </style>
 33 </head>
 34 <body>
 35 <div class="container">
 36 
 37   <!--内容展示区-->
 38   <div id="result"></div>
 39 
 40   <!--渲染处理区，textarea为必须元素，display：none-->
 41   <textarea id="template" class="template">
 42       <div>部门编号：{$T.list_id}</div>
 43       <div>部门负责人：{$T.name}</div>
 44      <div>
 45        <table>
 46          <tr>
 47            <th>编号</th>
 48            <th>姓名</th>
 49            <th>年龄</th>
 50            <th>邮箱</th>
 51            <th>性别</th>
 52          </tr>
 53 
 54          <!--渲染的关键句，类似于for循环-->
 55          {#foreach $T.table as record}
 56          <tr>
 57            <td>{$T.record.id}</td>
 58            <td>{$T.record.name}</td>
 59            <td>{$T.record.age}</td>
 60            <td>{$T.record.mail}</td>
 61            <td>{$T.record.sex}</td>
 62          </tr>
 63          {#/for}
 64          <!--渲染的关键句，类似于for循环-->
 65        </table>
 66      </div>
 67   </textarea>
 68 
 69 
 70   <div style=" 100%;margin: 4rem 0;">------------上面是多维数组，下面是单维数组----------</div>
 71 
 72 
 73   <div id="result1"></div>
 74   <textarea id="template1" class="template">
 75      <div>
 76        <table>
 77          <tr>
 78            <th class="Number">编号</th>
 79            <th>姓名</th>
 80            <th>年龄</th>
 81            <th>邮箱</th>
 82            <th>性别</th>
 83          </tr>
 84 
 85          <!--渲染的关键句，类似于for循环-->
 86          {#foreach $T as record}
 87          <tr>
 88            <td>{$T.record.id}</td>
 89            <td>{$T.record.name}</td>
 90            <td>{$T.record.age}</td>
 91            <td>{$T.record.mail}</td>
 92            <td>{$T.record.sex}</td>
 93          </tr>
 94          {#/for}
 95          <!--渲染的关键句，类似于for循环-->
 96        </table>
 97      </div>
 98   </textarea>
 99 
100 
101 
102 </div>
103 
104 
105 <script>
106   var data = {
107     "name": "网马伦",
108     "list_id": 89757,
109     "table": [
110       {"id": 1, "name": "Rain", "age": 22, "mail": "admin@domain.com","sex":"man"},
111       {"id": 2, "name": "皮特", "age": 24, "mail": "123456@domain.com","sex":"man"},
112       {"id": 13, "name": "卡卡", "age": 20, "mail": "112233@domain.com","sex":"man"}
113     ]
114   };
115 
116   $("#result").setTemplateElement("template");
117 
118   $("#result").processTemplate(data);
119 
120 
121 
122   var table=[
123     {"id": 13, "name": "卡卡", "age": 20, "mail": "112233@domain.com","sex":"man"},
124     {"id": 4, "name": "戏戏", "age": 26, "mail": "0147@domain.com","sex":"man"},
125     {"id": 5, "name": "一揪", "age": 25, "mail": "kkw@domain.com","sex":"man"}
126   ]
127   $("#result1").setTemplateElement("template1");
128 
129   $("#result1").processTemplate(table);
130 
131 
132 
133 </script>
134 </body>
135 </html>
　　效果如下：