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& ...
随机推荐
- C#（Net）软件开发常用工具汇总，提高你的开发效率
C#(Net)软件开发常用工具汇总,提高你的开发效率 写代码也要读书,爱全栈,更爱生活.每日更新原创IT编程技术及日常实用技术文章. 我们的目标是:玩得转服务器Web开发,搞得懂移动端,电脑客户端更是 ...
- Lesson 1: What is design? Why is it important?
Week 2: What is design? Why is it important? Article 1: Startups, this is how design works. It's a s ...
- SVN 密码破解，svn密码本地找回 忘记密码
svn 密码被保存在本地文件中 C:\Users\[your computer name]\AppData\Roaming\Subversion\auth\svn.simple 文件下. 加密保存 到 ...
- ORA-25153: Temporary Tablespace is Empty解决方法
SQL> @/tmp/4.txt create table huang_1 (deptno number,dname varchar2(19),loc varchar2(20)) * ERROR ...
- angularjs使用ng-messages-include实例
<!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...
- uva 10929 - You can say 11
#include <cstdio> using namespace std; ]; int main() { while(gets(in)) { ] == ] == ) break; ; ...
- Say bye to CMake and Makefile
用了几年的CMake,最近想试着琢磨如何将C++应用的动态链接全部改成静态链接,发现还需要研究CMake的用法,进入CMake的文档, http://www.cmake.org/cmake/help/ ...
- canvas制作简单动画
在画布元素<canvas>中,除了绘制图形.图像.文字外,还可以制作一些简单的动画,制作过程十分简单,主要分为两步操作: 1．自定义一个函数,用于图形的移动或其他动作. 2．使用setIn ...
- java学习笔记 (2) —— Struts2类型转换、数据验证重要知识点
1.*Action.conversion-properties 如(point=com.test.Converter.PointListConverter) 具体操作类的配置文件 2.*Action. ...
- POJ1840 hash
POJ1840 问题重述: 给定系数a1,a2, ..,a5,求满足a1 * x1 ^ 3 + a2 * x2 ^ 3 +... + a5 * x5 ^ 3 = 0的 xi 的组数.其中ai, xi都 ...