jquery-jtemplates.js模板应用
Posted nelsonlei
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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="width: 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>
效果如下：
以上是关于jquery-jtemplates.js模板应用的主要内容，如果未能解决你的问题，请参考以下文章
武汉企业网站设计武汉搜索引擎优化包括以下哪些内容武汉百度seo排名优化提高流量武汉百度代发帖包收录武汉网页设计模板和源代码多少钱
带权并查集（含种类并查集）经典模板 例题：①POJ 1182 食物链（经典）②HDU - 1829 A bug's life（简单） ③hihoCoder 1515 : 分数调查(示例代码(代