首页 > 代码库 > 模版化列表
模版化列表
干了一段时间，是时候总结一下了，主要总结下前台用到的技术。areaInfo.js数据定义如下：
{ "AreaList": [ { "Name": "北京", "Num": 123 }, { "Name": "Nework", "Num": 124 } ]}
---------------------
前台简单的代码如下，主要用到template.js 和jquery.js, test1.js：
<head> <title></title> <script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="http://www.mamicode.com/js/template.js"></script> <script type="text/javascript" src="http://www.mamicode.com/js/view/test1.js"></script></head> <body> <table> <thead><tr><th>Name</th><th>Num</th></tr></thead> <tbody id="tb-List"></tbody> </table> <hr/> <br/> <script id="areaLst-tpl" type="text/html"> <%for(i = 0; i<AreaList.length; i++){ %> <tr> <td><%==AreaList[i].Name %></td> <td><%==AreaList[i].Num %></td> </tr> <%} %> </script> </body>
------test1.js -----
$(document).ready(function() { $.ajax({ url: "js/data/areaInfo.js", //data: { ‘Inputs‘: data }, dataType: "json", type: "GET", async: false, success: function (json) { if (json.AreaList != null && json.AreaList.length > 0) { var items = template(‘areaLst-tpl‘, json); $(‘#tb-List‘).empty(); $(‘#tb-List‘).html(items); } else { alert("no data"); } }, error: function (error) { console.log(error); } });});
逻辑很简单，Ajax请求定义的json数据，然后调用template代码，格式化数据显示形成数据列表，类似 jsp用起来很方便。
模版化列表
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。