artTemplate-master的应用

Posted 2020-08-26 penven

刚开始，在没有使用这个模板之前，一致都是后台返回一个json的字符串，来在前端自己拼接字符串，不但麻烦，而且费时费力，而且还有时候经常拼接错误！导致了工作效率的延长

js模板的使用
<script type="html" id="temp">
{{if data.flag}}
    {{each data.info as value i}}
        <tr>
            <td><span>{{value.name}}</span></td>
            <td><span>{{value.mobile}}</span></td>
            <td><span class="color333">{{value.company_name}}</span></td>
            <td><span>{{value.linkman}}</span></td>
            <td><span>{{value.create_time}}</span></td>
        </tr>
    {{/each}}
    <tr>
        <td colspan="5">
        共<span>{{data.PageAllNum}}</span>页/第<span>{{data.PageNum}}</span>页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        {{if data.prev}}<span onclick=\'PageJump(this,"{{data.prev}}","{{data.card_section}}")\'>上一页</span>{{/if}}
        {{if data.next}}<span onclick=\'PageJump(this,"{{data.next}}","{{data.card_section}}")\'>下一页</span>{{/if}}
        </td>
    </tr>
{{/if}}
</script>

 

返回的json数据格式

{
    "pageNum": 1,
    "AllPageNum": 1,
    "info": [
        {
            "id": "35",
            "card_men": "于庆恒",
            "card_mobile": "13161589217",
            "card_num": "200",
            "card_company": "",
            "time": "2016-12-22 10:47",
            "card_section": "9000002110-9000002699",
            "percentage": "0"
        },
        {
            "id": "8",
            "card_men": "于庆恒",
            "card_mobile": "13161589217",
            "card_num": "200",
            "card_company": "",
            "time": "2016-12-22 10:47",
            "card_section": "9000002110-9000002699",
            "percentage": "0"
        }
    ],
    "flag": true,
    "pid": "42"
}

ajax时的代码使用

function PageJump(obj,page,card){
    $.ajax({
        url:"/admin.php/User/vip_people_card",
        type:"GET",
        data:{PageNum:page,card_section:card},
        dataType:"json",
        success:function(msg){
            console.log(msg);
            var html = template(\'temp\', {data: msg});
            $(obj).parents(\'.tbody\').html(html);
        }
    })
}

注：中的temp必须和

这个保持一致，type也不能为空，也不可以为"text/javascript"