ajax数据显示，使用js通用模板

最近用ajax获取数据，上级要求要自己写一个js模板，以往看到的js模板，大都数都是在js里面拼接的，现在换一种比较简单的写法，

通过ajax获取数据源,js模板循环显示数据

 function GetBalance() {
             var star = $("#starsj").val();
             var end = $("#endsj").val();
             var data = { opt: "GetAllotment", In: star, Out: end };
             var layindex = 0;
             $.ajax({
                 type: "POST",
                 url: "Source/GetData.aspx",
                 data: data,
                 beforeSend: function () {
                 },
                 success: function (r) {
                 //r值是一个obj类型，里面包含了几个数组
                     if (r.Status == 0) {
                         //使用laytpl方法获取写好的模板读出后，用r的数据去填充
                         var ret = laytpl($("#tpl-prieshow").html()).render(r);
                         $("#tplmo").html(ret); //将最新的模板数据，通过div（tplmo）显示出来
                     }
                 },
                 dataFilter: function (data, type) {
                     if (data.length > 0 && data != "{}") {
                         return $.parseJSON(data);
                     }
                     layer.msg('未查到数据!');
                     return null;
                 },
                 error: function (XMLHttpRequest, textStatus, errorThrown) { layer.msg('网络出现错误了!,请刷新重试或者联系管理员'); },
                 complete: function (XMLHttpRequest, textStatus) {
                     layer.close(layindex);
                 }
             })
         }

js代码

现在我们根据返回的json数据。看是否是数组和字符串

js模板 数组

得到r的数据格式

在js模板里面。为了避免错误。尽量不写注释。

 {
     "Status": 0,
     "Allotments": [{
         "Status": 402,
         "Used": 0,
         "Locked": 0,
         "Balance": 0
     }, {
         "Status": 402,
         "Used": 0,
         "Locked": 0,
         "Balance": 0
     }] 

返回的json数据

    <div>

     <div id="div_adduser" class="easyui-dialog" title="余额显示" style="width: 450px; height: 450px; ">
     <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}'})"
                             style="width: 85px; height: 20px;" /> </span>&nbsp;<span>截止日期：<input id="endsj" class="Wdate" onfocus="WdatePicker({minDate:'%y-%M-{%d+1}'})"style="width: 85px; height:20px; padding-left:8px;" /></span>&nbsp;
                             <a class="easyui-linkbutton"  plain="true" onclick="GetBalance()">确定日期</a></div>
                             <div id="tplmo" style="margin-top:2px;"></div>
                             </div>
        <%--金额显示--%>
    <script id="tpl-prieshow" type="text/html">
         {{# var dt=d.Allotments}}
         <div style="padding-left:6px;">
         {{#for(var i=0;i<dt.length;i++){ }}  //循环读取r里面的Allotments(这是一个数组)数据 ；这里两个大括号是输出的意思
         <table style="margin:5px 0px;width:98%;border:1px solid rgb(204,204,204);padding:5px;" id=hf}" >
        <tr>
         <td> <span style="width:80px;font-size:13px;padding:5px;">配额日期：<label>{{dt[i].EntitlementDate}}</label> </span></td>
        </tr>
        <tr> <td><span style="width:80px;font-size:13px;padding:5px;">配额结余：<label style="color:bule;">{{dt[i].Balance}}</label> </span><td>
         <td><span style="width:80px;font-size:13px;padding:5px;">锁定配额：<label style="color:red;">{{dt[i].Locked}}</label> </span></td>
         <td><span style="width:90px;font-size:13px;padding:5px;">已用配额：<label style="color:Gray;">{{dt[i].Used}}</label></span></td>
        </tr>
        </table>
         {{#} }} //和循环开始标签要成对（一般不再这里加注释。避免引起错误）
         </div>
     </script>
     </div>

模板代码(数组)

js模板 字符串

得到r的字符串格式

 { "Status": 0, "Locked": 1630, "Balance": 1000000 }

返回的字符串

    <script id="tpl-prieshow" type="text/html">
         {{# var dt=d}}//获取的字符串
         <div style="padding-left:6px;">
          //循环读取r里面字符串 ；这里两个大括号是输出的意思
         <table style="margin:5px 0px;width:98%;border:1px solid rgb(204,204,204);padding:5px;" id=hf}" >
        <tr>
         <td> <span style="width:80px;font-size:13px;padding:5px;">配额日期：<label>{{dt.EntitlementDate}}</label> </span></td>
        </tr>
        <tr> <td><span style="width:80px;font-size:13px;padding:5px;">配额结余：<label style="color:bule;">{{dt.Balance}}</label> </span><td>
         <td><span style="width:80px;font-size:13px;padding:5px;">锁定配额：<label style="color:red;">{{dt.Locked}}</label> </span></td>
         <td><span style="width:90px;font-size:13px;padding:5px;">已用配额：<label style="color:Gray;">{{dt.Used}}</label></span></td>
        </tr>
        </table>

         </div>
     </script>

字符串

这是模板需要的js引用文件

官方网址：http://laytpl.layui.com/

不懂的可以去看下，学习学习

 ! function() {
     "use strict";
     var f, b = {
             open: "{{",
             close: "}}"
         }, c = {
             exp: function(a) {
                 return new RegExp(a, "g")
             },
             query: function(a, c, e) {
                 var f = ["#([\\s\\S])+?", "([^{#}])*?"][a || 0];
                 return d((c || "") + b.open + f + b.close + (e || ""))
             },
             escape: function(a) {
                 return String(a || "").replace(/&(?!#?[a-zA-Z0-9]+;)/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/'/g, "'").replace(/"/g, "&quot;")
             },
             error: function(a, b) {
                 var c = "Laytpl Error：";
                 return "object" == typeof console && console.error(c + a + "\n" + (b || "")), "" /*c+a*/
             }
         }, d = c.exp,
         e = function(a) {
             this.tpl = a
         };
     e.pt = e.prototype, e.pt.parse = function(a, e) {
         var f = this,
             g = a,
             h = d("^" + b.open + "#", ""),
             i = d(b.close + "$", "");
         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) {
             return a = a.replace(h, "").replace(i, ""), '";' + a.replace(/\\/g, "") + '; view+="'
         }).replace(c.query(1), function(a) {
             var c = '"+(';
             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, "") + ')+"')
         }), a = '"use strict";var view = "' + a + '";return view;';
         try {
             return f.cache = a = new Function("d, _escape_", a), a(e, c.escape)
         } catch (j) {
             return delete f.cache, c.error(j, g)
         }
     }, e.pt.render = function(a, b) {
         var e, d = this;
         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")
     }, f = function(a) {
         return "string" != typeof a ? c.error("Template not found") : new e(a)
     }, f.config = function(a) {
         a = a || {};
         for (var c in a) b[c] = a[c]
     }, f.v = "1.1", "function" == typeof define ? define(function() {
         return f
     }) : "undefined" != typeof exports ? module.exports = f : window.laytpl = f
 }();

js引用文件