x-jquery-tmpl代码示例

jquery-tmpl 比较好用;具体是啥就百度吧,这里不做详细解释,直接上代码秒懂!

需要引用jquery.tmpl.js:

<script src="/tc_vsmp/view/assets/js/loan/jquery.tmpl.js"></script>

页面代码:

        数据是通过ajax返回过来的data对象,数据类型 json数据

<script id="recordsData" type="text/x-jquery-tmpl">
<tr><td class="table-check"><input name="subBox" type="checkbox"></td>
 	<td class="col-id">{{if id}} {{= id}} {{else}} -- {{/if}}</td>
	<td>{{= customer_name}}</td>
	<td>{{if id}} {{= amount}} {{else}} -- {{/if}}</td>
	<td>{{if id}} {{= left_account}} {{else}} -- {{/if}}</td>
	<td>{{if id}} {{= ((new Date(credit_date)).toLocaleDateString().replace(/\//g,'-'))}}({{= credit_operator}}) 
		{{else}} -- 
		{{/if}}
	</td>
	<td>{{= salesman}}</td>
    <td>{{= score}}</td> 
    <td>
		<a href="javascript:void(0);" class="am-btn am-btn-primary check-detail-btn" onclick="toview({{if id}} {{= id}} {{else}} '' {{/if}},{{= b_id}})"><span class="am-icon-eye""></span> 详情 </a> 
		{{if status==2}}
        	<a href="javascript:void(0);" class="am-btn am-btn-success edit-detail-btn" onclick="toedit('{{= id}}','{{= customer_name}}','{{= amount}}','{{= b_id}}')"><span class="am-icon-archive"></span> 修改 </a>
		    <a href="javascript:void(0);" class="am-btn am-btn-primary handle-btn" onclick="creditApplyAmount('{{= lat_id}}')"><span class="am-icon-archive"></span> 授信额度 </a>
		{{else}}
			<a href="javascript:void(0);" class="am-btn am-btn-default edit-detail-btn" ><span class="am-icon-archive"></span> 修改 </a>
			<a href="javascript:void(0);" class="am-btn am-btn-default"><span class="am-icon-archive"></span> 授信额度 </a>
		{{/if}}

	</td>
</tr>
</script>
<script id="recordsPagi" type="text/x-jquery-tmpl">
		<ul class="am-pagination">
              <span>共有<span class="goodscount" id="count" style="color:red">{{= count}}</span>条数据,共
              <span id="total" class="goodstotal" style="color:red">{{= total}}</span>页,当前第
              <span id="currentPage" class="goodsnoenum" style="color:red">{{= currentPage}}</span>页</span>
             {{if currentPage>1}}			 
				<li><a id="pre" href="javascript:;" class="pre" >« 上一页</a></li>
			 {{/if}}
			{{if currentPage<total}}	
              <li><a id="next" href="javascript:;" class="next" >下一页 »</a></li>
			{{/if}}
              <li><a class="topage" href="javascript:;" >跳转至</a></li>
              <li><input id="go" type="text" class="am-text-sm am-form-field go" style="width:50px;height:35px;padding:0.5em 1em;"> </li>
              <li><a href="javascript:;" class="lastNum" >尾页 </a></li>
          </ul>
</script>

js代码:

function commitAjax(data,callback){
	$.ajax({
		type:"POST",
		url:data.url,
		data:data.param,
		dataType:"json",
		success:function(data){
			setRecordsData(data.list);
			setRecordsPagi(data);
			if(callback!= undefined)
				callback(data.resultCode);
		},
		error:function(data){
			alert("获取数据异常!!!");
		}
	});
}
function setRecordsData(data){
	$("#records-tbody").html("");
	if(data==null||data==undefined||data==""){
		$("#records-tbody").html("没有查到记录");
	}else
		$("#recordsData").tmpl(data).appendTo("#records-tbody");
}
function setRecordsPagi(data){
	$("#records-pagi").html("");
	$("#recordsPagi").tmpl(data).appendTo("#records-pagi");
}

猜你喜欢

转载自blog.csdn.net/qq_15204179/article/details/82188112