您的位置:首页 > 其它

artTemplate的使用方法,简单实用的动态拼接,遍历,三目运算,复杂判断if else,方便的时间戳的转换

2018-08-09 11:10 489 查看

使用artTemplate对ajax动态获取的数据进行html拼接等其他操作

下面是代码,请自行引入artTemplate的4.12.2版本的 js和JQuery

[code]<script src="js/artTemplate/template-web.js"></script>
artTemplate模板↓
<script id="txdz" type="text/html">
{{if success==true}}
{{each data value index}}
<div style="border-bottom: 1px solid #c0c0c0;width: 548px;height: 90px; padding:10px 40px;">
<div>{{value.type==1?"分润提现":"分润收入"}}</div>//三目运算
<div style="position: relative;top: -20px ;left: 330px; width: 100px">金额 : {{value.bMoney}}</div>
<div style="position: relative;top: -10px">{{value.createTime | dateFmt}}</div>//时间戳的转换
<div style="position: relative;top:-29px; left: 330px; width:100px">
{{if value.status==1}}//复杂判断
<div style="color: #ffb800">订单处理中</div>
{{else if value.status==2}}
<div style="color: #009688">提现到账</div>
{{else if value.status==3}}
<div style="color: #ff5722">提现失败</div>
{{/if}}
</div>
<div style="position: relative;top: -23px;">交易单号: {{value.number}}</div>
</div>
{{/each}}
{{else}}
<h3>您最近没有消费记录</h3>
{{/if}}
</script>

ajax请求代码
$.ajax({
url: "/getBill",
data: {"appId": loginName},
success: function (data) {
var html = template("txdz", data);
$('#right').html(html);
}
})
}

对应的div
<div id="right">

</div>
//artTemplate时间戳的转换 老版本的时间转换跟这个不同
template.defaults.imports.dateFmt = function (ns) {
return new Date(parseInt(ns)).toLocaleString();
};

 

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐