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);
                }
            })
        }

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

js模板 数组

得到r的数据格式

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

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

   <div>

    <div id="div_adduser" class="easyui-dialog" title="余额显示" style=" 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=" 85px; height: 20px;" /> </span>&nbsp;<span>截止日期：<input id="endsj" class="Wdate" onfocus="WdatePicker({minDate:'%y-%M-{%d+1}'})"style=" 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;98%;border:1px solid rgb(204,204,204);padding:5px;" id=hf}" >
       <tr>
        <td> <span style="80px;font-size:13px;padding:5px;">配额日期：<label>{{dt[i].EntitlementDate}}</label> </span></td>
       </tr>
       <tr> <td><span style="80px;font-size:13px;padding:5px;">配额结余：<label style="color:bule;">{{dt[i].Balance}}</label> </span><td>
        <td><span style="80px;font-size:13px;padding:5px;">锁定配额：<label style="color:red;">{{dt[i].Locked}}</label> </span></td>
        <td><span style="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;98%;border:1px solid rgb(204,204,204);padding:5px;" id=hf}" >
       <tr>
        <td> <span style="80px;font-size:13px;padding:5px;">配额日期：<label>{{dt.EntitlementDate}}</label> </span></td>
       </tr>
       <tr> <td><span style="80px;font-size:13px;padding:5px;">配额结余：<label style="color:bule;">{{dt.Balance}}</label> </span><td>
        <td><span style="80px;font-size:13px;padding:5px;">锁定配额：<label style="color:red;">{{dt.Locked}}</label> </span></td>
        <td><span style="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, "&#39;").replace(/"/g, "&quot;")
            },
            error: function(a, b) {
                var c = "Laytpl Error：";
                return "object" == typeof console && console.error(c + a + "
" + (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(/[
	
]/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
}();