首页 > 代码库 > artTemplate-master的应用

artTemplate-master的应用


刚开始,在没有使用这个模板之前,一致都是后台返回一个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"

 

artTemplate-master的应用