前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >art-template语法_template模板

art-template语法_template模板

作者头像
全栈程序员站长
发布2022-09-20 19:05:08
6060
发布2022-09-20 19:05:08
举报
文章被收录于专栏:全栈程序员必看

大家好,又见面了,我是你们的朋友全栈君。

代码语言:javascript
复制
刚开始,在没有使用这个模板之前,一致都是后台返回一个json的字符串,来在前端自己拼接字符串,不但麻烦,而且费时费力,而且还有时候经常拼接错误!导致了工作效率的延长
代码语言:javascript
复制
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数据格式

代码语言:javascript
复制
{
    "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时的代码使用

代码语言:javascript
复制
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);
        }
    })
}

注:

art-template语法_template模板
art-template语法_template模板

中的temp必须和

art-template语法_template模板
art-template语法_template模板

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

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/166944.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档