avalon学习笔记一 列表及条件过滤
好长时间都没有更新博客了，不是因为没有学习新的东西，而是到了新的单位每天玩命加班实在是太累了！经过一年的努力吧，终于可以轻松一下了。废话少说，直接干货吧！
由于是学习阶段，就直接拿了公司的二级页面做了实验，链接如下：http://finance.wzdai.com/list.shtml 【由于某些历史原因，该页面仍然是jquery+arttemplate实现，构建工具是fis3】。
avalon重构核心代码如下：
<!doctype html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>avalon study</title> <link rel="stylesheet" href="http://finance.wzdai.com/style/common.css"> <link rel="stylesheet" href="http://finance.wzdai.com/style/invest/borrow.css"> <style> </style> </head> <body> <div class="bg-fa"> <div class="container"> <ol class="breadcrumb"> <li><a href="https://www.wzdai.com/">您的位置：首页</a></li> <li><a href="#">投资理财</a></li> <li class="active">正在招标的借款 </li> </ol> </div> </div> <div class="container" id="main" ms-controller="main"> <div class="bg-w clearfix investNewList borD"> <div class="fl"> <div class="clearfix"> <h4 class="fl font-xlarge">筛选投资项目</h4> <div class="fr selectBox relative" ms-class="active:multiSelect" ms-click="selectClick">多选 <i class="absolute iconC"></i></div> </div> <dl class="clearfix" id="option"> <dt>标的类型：</dt> <dd> <a href="javascript:void(0)" ms-click="borrowFilter('','borrowType')" ms-class="active:!filterType.borrowType.length" class="limit">不限</a> <a href="javascript:void(0)" ms-click="borrowFilter(2,'borrowType')" ms-class="active:(filterType.borrowType).indexOf(2)>=0" >短期宝</a> <a href="javascript:void(0)" ms-click="borrowFilter(3,'borrowType')" ms-class="active:(filterType.borrowType).indexOf(3)>=0" >车宝宝</a> <a href="javascript:void(0)" ms-click="borrowFilter(1,'borrowType')" ms-class="active:(filterType.borrowType).indexOf(1)>=0" >给力标</a> <a href="javascript:void(0)" ms-click="borrowFilter(4,'borrowType')" ms-class="active:(filterType.borrowType).indexOf(4)>=0" >净值标</a> <a href="javascript:void(0)" ms-click="borrowFilter(6,'borrowType')" ms-class="active:(filterType.borrowType).indexOf(6)>=0" >信用标</a> <a href="javascript:void(0)" ms-click="borrowFilter(5,'borrowType')" ms-class="active:(filterType.borrowType).indexOf(5)>=0" >秒还标</a> </dd> <dt>利率范围：</dt> <dd> <a href="javascript:void(0)" ms-click="borrowFilter('','aprLimit')" ms-class="active:!filterType.aprLimit.length" class="limit">不限</a> <a href="javascript:void(0)" ms-click="borrowFilter(1,'aprLimit')" ms-class="active:(filterType.aprLimit).indexOf(1)>=0">10%以下</a> <a href="javascript:void(0)" ms-click="borrowFilter(2,'aprLimit')" ms-class="active:(filterType.aprLimit).indexOf(2)>=0">10%-15%</a> </dd> <dt>标的期限：</dt> <dd> <a href="javascript:void(0)" ms-click="borrowFilter('','borrowLife')" ms-class="active:!filterType.borrowLife.length" class="limit">不限</a> <a href="javascript:void(0)" ms-click="borrowFilter(1,'borrowLife')" ms-class="active:(filterType.borrowLife).indexOf(1)>=0">1个月以内</a> <a href="javascript:void(0)" ms-click="borrowFilter(2,'borrowLife')" ms-class="active:(filterType.borrowLife).indexOf(2)>=0">1-3个月</a> <a href="javascript:void(0)" ms-click="borrowFilter(3,'borrowLife')" ms-class="active:(filterType.borrowLife).indexOf(3)>=0">3-6个月</a> <a href="javascript:void(0)" ms-click="borrowFilter(4,'borrowLife')" ms-class="active:(filterType.borrowLife).indexOf(4)>=0">6个月以上</a> </dd> <dt>还款方式：</dt> <dd class="nobor"> <a href="javascript:void(0)" ms-click="borrowFilter('','repaymentType')" ms-class="active:!filterType.repaymentType.length" class="limit">不限</a> <a href="javascript:void(0)" ms-click="borrowFilter(2,'repaymentType')" ms-class="active:(filterType.repaymentType).indexOf(2)>=0" class="">一次性还款</a> <a href="javascript:void(0)" ms-click="borrowFilter(0,'repaymentType')" ms-class="active:(filterType.repaymentType).indexOf(0)>=0" class="">按月分期还款</a> <a href="javascript:void(0)" ms-click="borrowFilter(3,'repaymentType')" ms-class="active:(filterType.repaymentType).indexOf(3)>=0" class="">每月还息到期还本</a> </dd> </dl> </div> </div> <div class="bg-w newList borD"> <ul class="change clearfix" id="orderWay"> <li class="text"><a href="javascript:void(0)">排序方式：</a></li> <li class="default"><a href="javascript:void(0)" ms-click="orderBy(6)">默认<i class=""></i></a></li> <li> <a href="javascript:void(0)" ms-click="orderBy(5)" ms-class="active:formData.orderType==5"> 发布时间 <i class="iconQ" ms-class="q-arrdown:formData.orderType==5" ms-visible="Math.abs(formData.orderType)==5"></i> </a> </li> <li> <a href="javascript:void(0)" ms-click="orderBy(1)" ms-class="active:formData.orderType==1"> 利率 <i class="iconQ" ms-class="q-arrdown:formData.orderType==1" ms-visible="Math.abs(formData.orderType)==1"></i> </a> </li> <li> <a href="javascript:void(0)" ms-click="orderBy(2)" ms-class="active:formData.orderType==2"> 金额 <i class="iconQ" ms-class="q-arrdown:formData.orderType==2" ms-visible="Math.abs(formData.orderType)==2"></i> </a> </li> <li> <a href="javascript:void(0)" ms-click="orderBy(3)" ms-class="active:formData.orderType==3"> 进度 <i class="iconQ" ms-class="q-arrdown:formData.orderType==3" ms-visible="Math.abs(formData.orderType)==3"></i> </a> </li> <li> <a href="javascript:void(0)" ms-click="orderBy(4)" ms-class="active:formData.orderType==4"> 期限 <i class="iconQ" ms-class="q-arrdown:formData.orderType==4" ms-visible="Math.abs(formData.orderType)==4"></i> </a> </li> </ul> <div class="listContent" ms-each-item="dataList"> <div class="listIn"> <div class="fl"> <div class="iconQ" ms-class="{{borrowClass[item.borrowType]}}"> {{borrowTxt[item.borrowType]}} </div> </div> <div class="rightCon"> <div class="titList clearfix"> <h3 title="{{item.borrowTitle}}">{{item.borrowTitle}}</h3> <p>用户名：{{item.userName}}</span></p> <p><i class="iconS icongr"></i>本息保障</p> </div> <div class="conList clearfix"> <dl> <dt>借款金额</dt> <dd><span class="clo-p fontB font-hxlarge">{{item.totalAccount}}</span>元</dd> </dl> <dl> <dt>年化收益率</dt> <dd class="clo-p fontB font-hxlarge">{{item.apr}}%</dd> </dl> <dl> <dt>借款期限</dt> <dd> <span ms-if="item.isDay==1"> <span class="font-hxlarge">{{item.dayTime}}</span>天 </span> <span ms-if="item.isDay==0"> <span class="font-hxlarge">{{item.monthTime}}</span>月 </span> </dd> </dl> <div class="borR"></div> <div class="fl relative svg"> <div class="circle-pgs absolute"> <span class="absolute">{{item.nowSchedule}}%</span> </div> </div> <dl class="tr"> <dt>可投金额：<span class="clo-p">￥{{item.leaveMoney}}</span></dt> <dd> <a ms-attr-href="hrefUrl+item.borrowId" class="btnRed">立即投标</a> </dd> </dl> </div> </div> </div> </div> <div id="pagination" class="mypage listContent"></div> </div> </div> <script src="http://cdn.bootcss.com/avalon.js/1.5.5/avalon.js"></script> <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script> var apiUrl = 'https://webapi.wzdai.com/'; var vm = avalon.define({ $id:'main', formData:{ pageSize:10, pageNumber:1, orderType:6, aprLimit:'', borrowType:'', borrowLife:'', repaymentType:'', borrowStatus:1 }, filterType:{ aprLimit:[], borrowType:[], borrowLife:[], repaymentType:[], }, hrefUrl:'http://finance.wzdai.com/liDetail.shtml?borrowId=', borrowTxt:{1:'力',2:'短',3:'车',4:'净',5:'秒',6:'信'}, borrowClass:{1:'iconLi',2:'iconF',3:'iconCar',5:'iconMiao',6:'iconXin',4:'iconJing'}, dataList:[], multiSelect:false, selectClick:function(){ vm.multiSelect = !vm.multiSelect }, borrowFilter:function(num,type){ if(!$.isNumeric(num)){ //全部 vm.filterType[type] = []; vm.formData[type] = ''; }else{ if(vm.multiSelect){ //多选 vm.filterType[type].push(num); vm.formData[type] = vm.filterType[type].join(','); }else{ //单选 vm.filterType[type].length = 0; vm.filterType[type].push(num); vm.formData[type] = num; } } getData(); }, orderBy:function(num){ vm.formData.orderType = vm.formData.orderType==num?-num:num; getData(); } }); getData(); function getData(){ $.ajax({ url:apiUrl+'invest/borrowList.do', dataType:'jsonp', data:vm.formData, success:function(data){ if(data.status==1){ vm.dataList = data.data.data; } } }) } </script> </body> </html>
由于本人能力有限，代码中如有错误或不当之处，还请各位大神不另指教！
本人也在学习当中，也欢迎讨论！
心情不爽，就这样吧！
转载请注明出处：http://www.cnblogs.com/callmesummer/p/5239625.html
拿出手机，打开支付宝扫一扫，希望多多支持：
