百度js模板的使用

最新推荐文章于 2024-04-16 17:51:46 发布

hqmln

最新推荐文章于 2024-04-16 17:51:46 发布

阅读量183

点赞数

分类专栏： js 文章标签： javascript 前端 ViewUI

本文链接：https://blog.youkuaiyun.com/hqmln/article/details/84720910

版权

js 专栏收录该内容

103 篇文章

订阅专栏

百度js模板的使用

官方地址：http://baidufe.github.io/BaiduTemplate/

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="keywords" content="baidu template" />
<meta name="description" content="javascript前端模板" />
<title>test</title>
<script type="text/javascript" src="./baiduTemplate.js"></script>

</head>
<body>
<script type="text/template" id="loanQueryTemp">
<div class="info_usual">
	<table class="tab_info table_list table-fixed">
	<tbody>
		<tr>
			<td width="17%">贷款品种</td>
			<!--在里边可以使用自定义函数-->
			<td width="16%"><!=xingye.finaceType(FINANCING_TYPE)!></td>
			<td width="16%">借款人编号</td>
			<td width="16%"><!=MORTGAGORNO!></td>
			<td width="16%">借款人名称</td>
			<td><!=MORTGAGOR_NAME!></td>
		</tr>
		<tr>
			<td>备注</td>
			<td colspan="5"><!=REMARK!></td>
		</tr>
	</tbody>
	</table>
	<div class="title clearfix">
		<h4>贷款明细</h4>
	</div>
	<table class="tab_info table_list table-fixed">
		<tbody>
			<!--模板取数组对象的方式-->
			<!for(var i=0;i<loans.length;i++){!>
			<tr>
				<td width="10%">贷款账号</td>
				<td width="15%"><!=loans[i].LOAN_ACCT_NO!></td>
				<td width="10%">申贷金额</td>
				<td width="15%"><!=loans[i].APP_AMOUNT!></td>
				<td width="10%">放款日期</td>
				<td width="15%"><!=loans[i].LOAN_DATE!></td>
				<td width="10%">放款到期日</td>
				<td width="15%"><!=loans[i].LOAN_EXPIRE!></td>
				<td width="10%">剩余本金</td>
				<td width="15%"><!=loans[i].REST_CAPITAL!></td>
				<td width="10%">利息</td>
				<td width="15%"><!=loans[i].INTEREST!></td>
			</tr>
 		<!}!>
		</tbody>
	</table>
</div>
</script>
<div id="contaner">
</div>
<script type="text/javascript"> 
	(function(window){
		var xingye = (window.xingye = window.xingye || {});
		xingye.finaceType=function(v){
			var str =v ;
			if(v==1){
				str="E 秒贷";
			}else if(v==2){
				str="E 票贷";
			}else if(v==3){
				str="E 购贷";
			}else if(v==4){
				str="E 订贷";
			}
			return str;
		}

	})(window);
  	//设置左分隔符为 <!
    baidu.template.LEFT_DELIMITER='<!';
    //设置右分隔符为 !>
    baidu.template.RIGHT_DELIMITER='!>';
	//此例子中还包含数组对象
			var data ={"bean":{"CREATE_ID":null,"CREATE_TIME":null,"FINANCING_TYPE":1,"ID":null,"MODIFY_ID":null,"MODIFY_TIME":null,"MORTGAGORNO":"75","MORTGAGOR_NAME":"HQM","REMARK":"备注","STATUS":null,"TYPE":null,"class":"com.voiinnov.drbl.order.bean.LoanQueryBean","loans":[{"APP_AMOUNT":43232344,"INTEREST":2323,"LOAN_ACCT_NO":"贷款账号","LOAN_DATE":1431253545000,"LOAN_EXPIRE":1432656000000,"REST_CAPITAL":1222222,"class":"com.voiinnov.drbl.order.bean.LoanQueryLoanBean"},{"APP_AMOUNT":32323,"INTEREST":5674,"LOAN_ACCT_NO":"贷款账号2","LOAN_DATE":1431253545000,"LOAN_EXPIRE":1432656000000,"REST_CAPITAL":2313333,"class":"com.voiinnov.drbl.order.bean.LoanQueryLoanBean"}]},"msg":"0"}
			delete  data.bean.class;
	//var tt = document.getElementById("loanQueryTemp").innerHTML;
	var template =baidu.template('loanQueryTemp',data.bean);
	document.getElementById("contaner").innerHTML=template;
</script>
</body>
</html>