artTemplate使用总结

最新推荐文章于 2023-08-09 11:02:46 发布

lwq45466

最新推荐文章于 2023-08-09 11:02:46 发布

阅读量1.2k

点赞数 1

分类专栏： web前端文章标签： artTemplat

本文链接：https://blog.csdn.net/lwq45466/article/details/47948321

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

必须先引入template.js

<script type="text/javascript" src="../js/template.js"></script>

-1.artTemplate 用helper()方法截取字符串

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>截取字符串</title>
        <script src="dist/template.js">
        </script>
    </head>
    <body>
    <div id="content"></div>
    <script id="test" type="text/html">
        {{str("20150608CH0000000105000001")}}
    </script>
    <script>
              //在遍历的时候调用该方法
        template.helper("str", function(id){
            return id.substr(20);
        });
        //设置schedulenumid的值
        var data = {
        //    schedulenumid: "20150608CH0000000105000001"
        };
        var html = template("test", data);
        document.getElementById("content").innerHTML = html;
    </script>
    </div>
</body>
</html>

2.遍历表单数据

responseBody：为JSON形式的表单数据
TemplateRet : 为artTemplate的script的id
List ：为artTemplate 所要替换部分的table/div的id

var templateHtml = template("TemplateRet", responseBody);
$("#List").append(templateHtml);

<table width="97%" class="tabder" align="center" style="margin:0 auto;" id="List"></table>
<script id="TemplateRet" type="text/html">
{{each playItemCheckRet as checkRet i}}
    <tr>
        <td>
            <div class="rtable">
                <table cellpadding="0" cellspacing="0">
                    <tr>
                        <th width="50">编号</th>
                        <th>节目名称</th>
                        <th width="70">播放类型</th>
                        <th width="60">模板数</th>
                        <th width="100">开始时间</th>
                        <th width="100">节目时长</th>
                        <th width="100">结束时间</th>
                        <th width="160">条形码</th>
                        <th width="150">备注</th>
                    </tr>               
            {{each checkRet.scheduleLists as schedule j}}
                    <tr class="bgpink">
    <td class="tc">{{subData(schedule.schedulenumid)}}</td>
    <td>{{schedule.ptitle}}</td>
    <td class="tc">顺序</td>
    <td class="tc">{{schedule.playitemcount}}</td>
    <td class="tc">{{schedule.startplay}}</td>
    <td class="tc">{{schedule.lenplay}}</td>
    <td class="tc">{{schedule.endplay}}</td>
    <td>{{schedule.pprogramid}}</td>
    <td></td>
                    </tr>           
            {{/each}}
                </table>
            </div>
            <div class="rtable pdb_15">
                <table cellpadding="0" cellspacing="0">
                    <tr>
                        <th>名称</th>
                        <th width="100">区域</th>
                        <th width="70">类型</th>
                        <th width="100">开始时间</th>
                        <th width="100">时长</th>
                        <th width="100">间隔</th>
                        <th width="100">结束时间</th>
                        <th width="90">次数</th>
                        <th width="90">内容</th>
                        <th width="90"></th>
                    </tr>
                {{each checkRet.playItemLists as playItem}}
                    <tr>
        <td class="bgblued">{{playItem.templatename}}</td>
        <td class="bgblued tc">{{playItem.area}}</td>
        <td class="bgblued tc">{{playItem.playtype}}</td>
        <td class="bgblued tc">{{playItem.starttime}}</td>
        <td class="bgblued tc">{{playItem.duration}}</td>
        <td class="bgblued tc">{{playItem.span}}</td>
        <td class="bgblued tc">{{playItem.endtime}}</td>
        <td class="bgblued tc">{{playItem.times}}</td>
        <td class="bgblued tc">25</td>
        <td class="bgblued tc">{{playItem.templategroupname}}</td>
                    </tr>
                {{/each}}
                </table>
            </div>
        </td>
    </tr>
{{/each}}
</script>

下载地址：
https://github.com/aui/artTemplate
在线预览：
http://aui.github.com/artTemplate/

lwq45466

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
artTemplate使用总结

必须先引入template.js<script type="text/javascript" src="../js/template.js"></script>-1.artTemplate 用helper()方法截取字符串<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/ht
复制链接

扫一扫