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& ...
随机推荐
- Sicily 2005.Lovely Number
题目地址:2005.Lovely Number 思路: 若测试数据出现的次数为奇数,则输出它. 所以,可以先排序,若前后相等,前后都设为0,最后不为0的则可以输出. 具体代码如下: #include ...
- sql server在使用xp_cmdshell
一.sql server在使用xp_cmdshell读取远程服务器上的文件时,要先将远程服务器的目录映射到本地 代码: exec master..xp_cmdshell 'net use P: \\ ...
- DEDE数据库修改后台变量
进行数据库之后找到 dede_sysconfig 这个数据表,然后查找到你要删除的dede教程变量名称． 这样就可以了
- MySQL STRAIGHT_JOIN
问题 最近在调试一条查询耗时5s多的sql语句,这条sql语句用到了多表关联(inner join),按时间字段排序(order by),时间字段上已经创建了索引(索引名IDX_published_a ...
- About abstract class.
Abstract means should be realized. Virtual means could be overrided. It is very different!
- canvas加载图像
之前按照例子,加载图像,发现加载图像,加载不上去,代码也没有错误,经过几次的尝试:发现需要重复调用下drawImage才可以. <script type="text/javascrip ...
- [SQL注入2]FROM SQL INJECTION TO SHELL: POSTGRESQL EDITION
FROM SQL INJECTION TO SHELL: POSTGRESQL EDITION 这里先介绍一下POSTGRESQL.这是一款数据库管理系统,与oracle是同类型软件.08年左右的市场 ...
- 红帽（Red Hat Linux）下SVN服务器的安装与配置
转:http://www.cnblogs.com/xd502djj/archive/2011/01/21/1941404.html 第一章 安装 1. 采用源文件编译安装.源文件共两个,为:subve ...
- ubuntu apache svn 参考
Ubuntu下Subversion服务器的安装配置 本文涉及的范围 要通过 HTTP 协议访问 Subversion 文件仓库,需要安装并配置好 Web 服务器.Apache2 被证实可以很好 ...
- LeetCode_Unique Paths
A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...