最近用ajax获取数据，上级要求要自己写一个js模板，以往看到的js模板，大都数都是在js里面拼接的，现在换一种比较简单的写法，
通过ajax获取数据源,js模板循环显示数据
1 function GetBalance() { 2 var star = $("#starsj").val(); 3 var end = $("#endsj").val(); 4 var data = { opt: "GetAllotment", In: star, Out: end }; 5 var layindex = 0; 6 $.ajax({ 7 type: "POST", 8 url: "Source/GetData.aspx", 9 data: data, 10 beforeSend: function () { 11 }, 12 success: function (r) { 13 //r值是一个obj类型，里面包含了几个数组 14 if (r.Status == 0) { 15 //使用laytpl方法获取写好的模板读出后，用r的数据去填充 16 var ret = laytpl($("#tpl-prieshow").html()).render(r); 17 $("#tplmo").html(ret); //将最新的模板数据，通过div（tplmo）显示出来 18 } 19 }, 20 dataFilter: function (data, type) { 21 if (data.length > 0 && data != "{}") { 22 return $.parseJSON(data); 23 } 24 layer.msg('未查到数据!'); 25 return null; 26 }, 27 error: function (XMLHttpRequest, textStatus, errorThrown) { layer.msg('网络出现错误了!,请刷新重试或者联系管理员'); }, 28 complete: function (XMLHttpRequest, textStatus) { 29 layer.close(layindex); 30 } 31 }) 32 }
现在我们根据返回的json数据。看是否是数组和字符串
js模板 数组
得到r的数据格式
在js模板里面。为了避免错误。尽量不写注释。
1 { 2 "Status": 0, 3 "Allotments": [{ 4 "Status": 402, 5 "Used": 0, 6 "Locked": 0, 7 "Balance": 0 8 }, { 9 "Status": 402, 10 "Used": 0, 11 "Locked": 0, 12 "Balance": 0 13 }]
1 <div> 2 3 <div id="div_adduser" class="easyui-dialog" title="余额显示" style=" 450px; height: 450px; "> 4 <div style="padding:8px 8px;border-radius:3px 4px;border-bottom:1px solid rgb(204,204,204);"><span>开始日期：<input id="starsj" class="Wdate"onfocus="WdatePicker({minDate:'%y-%M-{%d+1}'})" 5 style=" 85px; height: 20px;" /> </span> <span>截止日期：<input id="endsj" class="Wdate" onfocus="WdatePicker({minDate:'%y-%M-{%d+1}'})"style=" 85px; height:20px; padding-left:8px;" /></span> 6 <a class="easyui-linkbutton" plain="true" onclick="GetBalance()">确定日期</a></div> 7 <div id="tplmo" style="margin-top:2px;"></div> 8 </div> 9 <%--金额显示--%> 10 <script id="tpl-prieshow" type="text/html"> 11 {{# var dt=d.Allotments}} 12 <div style="padding-left:6px;"> 13 {{#for(var i=0;i<dt.length;i++){ }} //循环读取r里面的Allotments(这是一个数组)数据 ；这里两个大括号是输出的意思 14 <table style="margin:5px 0px;98%;border:1px solid rgb(204,204,204);padding:5px;" id=hf}" > 15 <tr> 16 <td> <span style="80px;font-size:13px;padding:5px;">配额日期：<label>{{dt[i].EntitlementDate}}</label> </span></td> 17 </tr> 18 <tr> <td><span style="80px;font-size:13px;padding:5px;">配额结余：<label style="color:bule;">{{dt[i].Balance}}</label> </span><td> 19 <td><span style="80px;font-size:13px;padding:5px;">锁定配额：<label style="color:red;">{{dt[i].Locked}}</label> </span></td> 20 <td><span style="90px;font-size:13px;padding:5px;">已用配额：<label style="color:Gray;">{{dt[i].Used}}</label></span></td> 21 </tr> 22 </table> 23 {{#} }} //和循环开始标签要成对（一般不再这里加注释。避免引起错误） 24 </div> 25 </script> 26 </div>
js模板 字符串
得到r的字符串格式
1 { "Status": 0, "Locked": 1630, "Balance": 1000000 }
1 <script id="tpl-prieshow" type="text/html"> 2 {{# var dt=d}}//获取的字符串 3 <div style="padding-left:6px;"> 4 //循环读取r里面字符串 ；这里两个大括号是输出的意思 5 <table style="margin:5px 0px;98%;border:1px solid rgb(204,204,204);padding:5px;" id=hf}" > 6 <tr> 7 <td> <span style="80px;font-size:13px;padding:5px;">配额日期：<label>{{dt.EntitlementDate}}</label> </span></td> 8 </tr> 9 <tr> <td><span style="80px;font-size:13px;padding:5px;">配额结余：<label style="color:bule;">{{dt.Balance}}</label> </span><td> 10 <td><span style="80px;font-size:13px;padding:5px;">锁定配额：<label style="color:red;">{{dt.Locked}}</label> </span></td> 11 <td><span style="90px;font-size:13px;padding:5px;">已用配额：<label style="color:Gray;">{{dt.Used}}</label></span></td> 12 </tr> 13 </table> 14 15 </div> 16 </script>
这是模板需要的js引用文件
官方网址：http://laytpl.layui.com/
不懂的可以去看下，学习学习
1 ! function() { 2 "use strict"; 3 var f, b = { 4 open: "{{", 5 close: "}}" 6 }, c = { 7 exp: function(a) { 8 return new RegExp(a, "g") 9 }, 10 query: function(a, c, e) { 11 var f = ["#([\s\S])+?", "([^{#}])*?"][a || 0]; 12 return d((c || "") + b.open + f + b.close + (e || "")) 13 }, 14 escape: function(a) { 15 return String(a || "").replace(/&(?!#?[a-zA-Z0-9]+;)/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/'/g, "'").replace(/"/g, """) 16 }, 17 error: function(a, b) { 18 var c = "Laytpl Error："; 19 return "object" == typeof console && console.error(c + a + " " + (b || "")), "" /*c+a*/ 20 } 21 }, d = c.exp, 22 e = function(a) { 23 this.tpl = a 24 }; 25 e.pt = e.prototype, e.pt.parse = function(a, e) { 26 var f = this, 27 g = a, 28 h = d("^" + b.open + "#", ""), 29 i = d(b.close + "$", ""); 30 a = a.replace(/[ ]/g, " ").replace(d(b.open + "#"), b.open + "# ").replace(d(b.close + "}"), "} " + b.close).replace(/\/g, "\\").replace(/(?="|')/g, "\").replace(c.query(), function(a) { 31 return a = a.replace(h, "").replace(i, ""), '";' + a.replace(/\/g, "") + '; view+="' 32 }).replace(c.query(1), function(a) { 33 var c = '"+('; 34 return a.replace(/s/g, "") === b.open + b.close ? "" : (a = a.replace(d(b.open + "|" + b.close), ""), /^=/.test(a) && (a = a.replace(/^=/, ""), c = '"+_escape_('), c + a.replace(/\/g, "") + ')+"') 35 }), a = '"use strict";var view = "' + a + '";return view;'; 36 try { 37 return f.cache = a = new Function("d, _escape_", a), a(e, c.escape) 38 } catch (j) { 39 return delete f.cache, c.error(j, g) 40 } 41 }, e.pt.render = function(a, b) { 42 var e, d = this; 43 return a ? (e = d.cache ? d.cache(a, c.escape) : d.parse(d.tpl, a), b ? (b(e), void 0) : e) : c.error("no data") 44 }, f = function(a) { 45 return "string" != typeof a ? c.error("Template not found") : new e(a) 46 }, f.config = function(a) { 47 a = a || {}; 48 for (var c in a) b[c] = a[c] 49 }, f.v = "1.1", "function" == typeof define ? define(function() { 50 return f 51 }) : "undefined" != typeof exports ? module.exports = f : window.laytpl = f 52 }();