• 注意几个坑!字符串替换的坑和绑定data-url的坑!data-url那里很巧妙


    <html>
    <head>
    	<meta charset="utf-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<title></title>
    	<link rel="stylesheet" href="">
    </head>
    <style type="text/css">
    </style>
    <body>
    	<ul>
    		
    	</ul>
    </body>
    
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://apps.bdimg.com/libs/fastclick/1.0.0/fastclick.min.js" type="text/javascript" charset="utf-8" ></script>
    <script  type="text/javascript" charset="utf-8" >
    	var DATA='[{"status": "IN_PROGRESS", "loan_limited": "5", "load_no": "123131231", "agreement": "http://www.mop.com/", "payed": "1", "amount": 15000.14885, "loan_time": "2016-06-17"}, {"status": "DONE", "loan_limited": "1", "load_no": "123131123131231", "agreement": "http://www.163.com/", "payed": "1", "amount": 15000, "loan_time": "2016-05-17"}, {"status": "IN_PROGRESS", "loan_limited": "5", "load_no": "123131231231", "agreement": "http://www.baidu.com/", "payed": "1", "amount": 25000, "loan_time": "2016-06-10"}]';
    	var DATA=DATA.replace(/(d{4})-(d{2})-(d{2})/g, '$1年$2月$3日');
    
    		var dataJSON=JSON.parse(DATA);
    		var sort=dataJSON.sort(function(a,b){
    	 	return a.status>b.status?-1:1
    	 });
    	var template="<li class=  $status$ ><div><p>借款金额</p><p>$amount$</p><p > $status$ </p></div>"
    			+"<div><p>借款日</p><p>$loan_time$</p></div>"
    			+"<div><p>还款期限</p><p>$loan_limited$</p></div>"
    			+"<div><p>已还</p><p>$payed$</p></div>"
    			+"<div><p>借款编号</p><p>$load_no$</p><p class='test'  data-url='$agreement$'>《借款协议》</p></div></li>"
    
    			dataJSON.forEach(function(item){
    				var tplReplace=template.replace("$amount$",function(num){
    					var num=item.amount;
    					var num = (num || 0).toString(), result = '';
        						while (num.length > 3) {
            							result = ',' + num.slice(-3) + result;
           							 num = num.slice(0, num.length - 3);
        							}
       							 if (num) { result = num + result; }
      							  return result
                					   })
    				.replace("$status$",item.status.toLowerCase())
    				 .replace("$status$",function(){
    				 	if(item.status=="IN_PROGRESS"){
    				 		return  "进行中"
    				 	}
    				 	else{
    				 		return "已完结"
    				 	}
    				 })
    				.replace("$loan_time$",item.loan_time)
    				.replace("$loan_limited$",item.loan_limited)
    				.replace("$payed$",item.payed)
    				.replace("$agreement$",item.agreement)
    				.replace("$load_no$",item.load_no);
    
    				$("ul").append(tplReplace);
    				
    			})
    
    			$(".test").bind("click", function(){   //$agreement$  "$agreement$"
    				console.log($(this).attr('data-url'));
       				 window.location.href = $(this).data('url');
    				})
    
    </script>
    </html>
  • 相关阅读:
    Delphi 2010下安装IOComp
    为自定义控件的某个属性添加像Winform控件中属性的注释
    C#WinForm仿qq窗体拖到windows窗体边上时,自动隐藏C#WinForm
    给图片添加水印,解决GIF添加水印的问题(无法从带有索引像素格式的图像创建 Graphics 对象)
    怎样把Image数据放入数据库
    取消IE“已限制此网页运行可以访问计算机的脚本
    sql 二进制文件的导入导出
    [转载]数据结构笔试题基础
    [转载]搜索算法(含基本搜索算法与深度搜索与广度搜索算法等思想)
    [转载]面试笔试总结
  • 原文地址:https://www.cnblogs.com/liuestc/p/5688992.html
Copyright © 2020-2023  润新知