js中使用template.js插件

$.ajax({
    url:'http://10.162.12.85:8080/api/info?code=bingbing2&type=1',
    type:'get',
	dataType: 'json', 
	success:function (res) {
		// 设置车牌号
		if (res.info.navicerts.length !=0) {
		    $('#car-number').html(res.info.vehicle.plateNumber);
            // ajax中调用模版
			var html = template('allow-list', res.info);
			$('.allow-info-wrapper').append(html);

			 // 控制准运证信息的展开
		    	for (var i=0; i<=res.info.navicerts.length; i++) {
					(function(i) {
					   $('#collapse-btn'+i).toggle(function(){
							$('#allow-list-wrapper'+i).hide();
							$('#layui-icon'+i).html('&#xe61a;');
						},function(){
							$('#allow-list-wrapper'+i).show();
							$('#layui-icon'+i).html('&#xe619;');
						});
					 })(i);
				}; 
		    } else { // 没有数据
		    $('#tips').show();
		}



// js中设置html模版
<script type="text/html" id="allow-list">
    {{ each navicerts as value i }}
    <div class="allow-info-inner">
	<div id="allow-info" class="allow-info" style="margin-top: 2px;">
	    <h4>准运证信息{{i+1}}</h4>
		<span id="collapse-btn{{i}}"><i class="layui-icon" id="layui-icon{{i}}">&#xe619;</i></span>
	</div>

	<ul class="lists" id="allow-list-wrapper{{i}}" style="margin-top: 1px;">
	    <li><h4>准运证编号</h4> <span>{{value.cardId}}</span></li>
		<li><h4>运输单位</h4> <span>{{value.unit}}</span></li>
		<li><h4>负责人</h4> <span>{{value.contacts}}</span></li>
		<li><h4>电话</h4> <span>{{value.phone}}</span></li>
		<li><h4>有效日期</h4> <span>{{value.validStartTime}} - {{value.validEndTime}}</span></li>
	{{ if value.navicertStatus == 0 }}
		<li><h4>准运证状态</h4> <span style="color:grey;font-weight: 600;">已失效</span></li>
		{{ else if value.navicertStatus == 1 }}
		<li><h4>准运证状态</h4> <span style="color:red;font-weight: 600;">生效中</span></li>
	{{ /if }}
			</ul>
		</div>
    {{ /each }}
	</script>


// html中待插入的结构


<!-- 准运证信息 -->
<div class="allow-info-wrapper"></div>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值