最近用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 }
js代码
现在我们根据返回的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 }]
返回的json数据
1 <div>
2
3 <div id="div_adduser" class="easyui-dialog" title="余额显示" style="width: 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="width: 85px; height: 20px;" /> </span> <span>截止日期：<input id="endsj" class="Wdate" onfocus="WdatePicker({minDate:‘%y-%M-{%d+1}‘})"style="width: 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;width:98%;border:1px solid rgb(204,204,204);padding:5px;" id=hf}" >
15 <tr>
16 <td> <span style="width:80px;font-size:13px;padding:5px;">配额日期：<label>{{dt[i].EntitlementDate}}</label> </span></td>
17 </tr>
18 <tr> <td><span style="width:80px;font-size:13px;padding:5px;">配额结余：<label style="color:bule;">{{dt[i].Balance}}</label> </span><td>
19 <td><span style="width:80px;font-size:13px;padding:5px;">锁定配额：<label style="color:red;">{{dt[i].Locked}}</label> </span></td>
20 <td><span style="width: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;width:98%;border:1px solid rgb(204,204,204);padding:5px;" id=hf}" >
6 <tr>
7 <td> <span style="width:80px;font-size:13px;padding:5px;">配额日期：<label>{{dt.EntitlementDate}}</label> </span></td>
8 </tr>
9 <tr> <td><span style="width:80px;font-size:13px;padding:5px;">配额结余：<label style="color:bule;">{{dt.Balance}}</label> </span><td>
10 <td><span style="width:80px;font-size:13px;padding:5px;">锁定配额：<label style="color:red;">{{dt.Locked}}</label> </span></td>
11 <td><span style="width: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 + "\n" + (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(/[\r\t\n]/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 }();
js引用文件
时间： 2024-08-05 02:22:08