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
拿出手机，打开支付宝扫一扫，希望多多支持：
avalon学习笔记一 列表及条件过滤的更多相关文章
- 微信小程序学习笔记二 列表渲染 + 条件渲染
1. 列表渲染 1.1 wx:for 在组件上使用wx:for控制属性绑定一个数组, 即可使用数组中各项的数据重复渲染该组件 默认数组的当前项的下标变量名默认为 index, 数组当前项的变量名默认为 ...
- python学习笔记整理——列表
Python 文档学习笔记 数据结构--列表 列表的方法 添加 list.append(x) 添加元素 添加一个元素到列表的末尾:相当于a[len(a):] = [x] list.extend(L) ...
- python3.4学习笔记(十) 常用操作符,条件分支和循环实例
python3.4学习笔记(十) 常用操作符,条件分支和循环实例 #Pyhon常用操作符 c = d = 10 d /= 8 #3.x真正的除法 print(d) #1.25 c //= 8 #用两个 ...
- python3.4学习笔记(十一) 列表、数组实例
python3.4学习笔记(十一) 列表.数组实例 #python列表,数组类型要相同,python不需要指定数据类型,可以把各种类型打包进去#python列表可以包含整数,浮点数,字符串,对象#创建 ...
- React学习笔记（七）条件渲染
React学习笔记(七) 六.条件渲染 使用if或条件运算符来创建表示当前状态的元素. 可以使用变量来存储元素.比如: let button = null; if (isLoggedIn) { but ...
- 【JAVAWEB学习笔记】21_多条件查询、attr和prop的区别和分页的实现
今天主要学习了数据库的多条件查询.attr和prop的区别和分页的实现 一.实现多条件查询 public List<Product> findProductListByCondition( ...
- avalon学习笔记
背景: 刚刚到一家新的公司,我新接手的项目采用的mvvm框架是avalon,当然我以前没有学过angular,但是用过react,所以对于这类框架应该不算陌生.但毕竟是一个新的框架,所以还是先学起来, ...
- scala 学习笔记一 列表List
1.介绍 Scala 列表类似于数组,它们所有元素的类型都相同,但是它们也有所不同:列表是不可变的,值一旦被定义了就不能改变,其次列表 具有递归的结构(也就是链接表结构)而数组不是.. 列表的元素类型 ...
- HTML5学习笔记<四>: 列表, 块和布局
HTML列表 列表标签 标签 描述 <ol> 定义有序列表. <ul> 定义无序列表. <li> 定义列表项. <dl> 定义定义列表. <dt& ...
随机推荐
- css3圈圈进度条
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- c - 输出 101 至 200之间的素数.
#include <stdio.h> #include <math.h> //判断 101-200 之间有多少个素数,并输出所有素数. int main(void) { , e ...
- winform托盘时，要运行一个实例，解决办法
需求:winform应用程序,当隐藏到托盘时,再次运行exe程序,让其只运行一个实例,并且把窗口从托盘中显示出来 应用程序名可以通过下面代码,获取到: Process current = Proces ...
- jQuery select 操作全集
添加option $('#id').append("<option value="value">Text</option>");//为s ...
- vagrant 配置文件简析
#自定义box名字 config.vm.box = "website" #以ip192.168.33.10访问 config.vm.network "private_ne ...
- nvm linux命令
nvm alias default 0.12.10 nvm alias default 0.10.24 nvm list NVM_NODEJS_ORG_MIRROR=http://npm.taobao ...
- SSH三者作用
Struts在项目中的作用 Struts 在项目主要起控制作用,只要用于web层(即视图层和控制层)Struts本身是使用典型的MVC结构实现的,项目中使用了struts之后就等于项目也是一个MVC结 ...
- 字符串处理(正则表达式、NSScanner扫描、CoreParse解析器)－备用
搜索 在一个字符串中搜索子字符串 最灵活的方法 1 - (NSRange)rangeOfString:(NSString *)aString options:(NSStringCompareOptio ...
- NSIS检测操作系统x64还是x86的问题。
想共同维护一个NSIS脚本文件的,不想搞两个版本的脚本文件了.开始想到了!if语句,没试过,不知道行不行得通.后来google了一下.可以用两个头文件搞定.参照下面链接 Reference: http ...
- logstash tag使用说明
zjtest7-frontend:/usr/local/logstash-2.3.4/config# cat stdin04.conf input { stdin { } } filter { # d ...