前端each 、$.each() 、tmpl() 简单实用

基本的思想是：1.通过点击触发，请求后台数据将数据。

                         2.通过$.each() 提取相关数据，添加到数组中。

                         3.然后通过tmpl()将数据填充到模板中。

页面是jsp的，其他文件下情况不详。本人也是前端的小白。。。

  function getCustomerGoods() {
        var url = "${ctx}/customerCard/getGoods";
        var customerId = $("#customerInfo-tab").attr("data-id");
        $.post(url,
            {
                customerId: customerId
            },
            function (data) {
            console.log(data);
                if (data.length > 0) {
                    var lists = [];
                    $.each(data, function (n, value) {
                        var obj = {};
                        obj.createDate = value.createDate;
                        obj.banlance = value.banlance;
                        obj.remark = value.remark;
                        obj.cardNo = value.cardNo;
                        obj.clubCard = value.clubCard;
                        obj.giveGoodsList = value.giveGoodsList;
                        lists.push(obj);
                    });
                    var data = {"data": lists};
                    console.log(data);
                    $("#customerGiveGoodsList-content").html($("#customerGiveGoodsList-content-tmpl").tmpl(data));
                } else {
                    $("#customerGiveGoodsList-content").html("<tr><td colspan='8'><p class='noPageData'>暂无记录！</p></td></tr>");
                }
            });
    }

上面是简单的post ，提取了下数据。下面是重点

<script id='customerGiveGoodsList-content-tmpl' type='text/x-jquery-tmpl'>
    {{each(i, card) data}}
       <tr>
            <td rowspan="{{= card.giveGoodsList?card.giveGoodsList.length:''}}">{{= card.cardNo}}</td>
            <td rowspan="{{= card.giveGoodsList?card.giveGoodsList.length:''}}">{{= card.clubCard.cardName}}</td>
            <td rowspan="{{= card.giveGoodsList?card.giveGoodsList.length:''}}">{{= card.clubCard.cardType == '1'?'储值卡':clubCard.cardType == '2'?'折扣卡':clubCard.cardType == '3'?'项目卡':""}}</td>
            <td rowspan="{{= card.giveGoodsList?card.giveGoodsList.length:''}}">{{= card.banlance}}</td>
            <td rowspan="{{= card.giveGoodsList?card.giveGoodsList.length:''}}">{{= card.createDate}}</td>
            <td rowspan="{{= card.giveGoodsList?card.giveGoodsList.length:''}}">{{= card.remark}}</td>


            <td>{{=  card.giveGoodsList?card.giveGoodsList[0].hisGoods.name:''}}</td>
            <td>{{= card.giveGoodsList?card.giveGoodsList[0].num:''}}</td>
       </tr>
               {{each(n, value) card.giveGoodsList}}
               {{if n>0}}
                <tr>
                    <td>{{=  value.hisGoods.name}}</td>
                    <td>{{= value.num}}</td>
                </tr>
                {{/if}}
            {{/each}}
      {{/each}}
</script>

 

{{each(i, card) data}} i 相当于for 循环中的递增变量， card 是迭代变量，data是传入的json数据 。  上面请求成功后的tmpl() 传入的json数据。

下面是结果：

为了合并单元格必须获取到数组中的长度。 后台穿过来的List 会解析成json数组。所以想获取到有多少条数据，要通过.length获取。不是size(),不是length() 而是一个固有属性length。如果数组是空的话会报undefined，去数据的时候最好判断一下是否为空（温馨提示下：有可能有跟我一样傻的人呢。）

 

字段中有两个each()方法，虽然里面的参数不需要定义，但是最好不要重名。