必须先引入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/