生成filter
这一节我们将介绍实现数据筛选至关重要的生成filter函数
1、filter函数的用处
生成filter,可用于麻点图数据筛选,还可以用来生成url异步获取LBS云数据
2、require对象的构建
我们构建一个require对象,我们用他来保存用户需求,并且加入了获取最大值最小值以及删除数组元素的函数,方便对数据进行操作。
var require = {
price:[],
type:[],
getMax: function () {
var max = Math.max.apply(null, this.price);
return max;
},
getMin: function(){
var min = Math.min.apply(null, this.price);
return min;
},
removeEle: function(index,arrName){
if(index>-1){
this[arrName].splice(index,1);
}
}
};
3、为点击事件加入相应操作
我们为每个checkbox加入data-label属性。
我们使用getAttribute('data-label')获取checkbox的自定义data-label数据,这个数据用来标记数据是价格相关还是酒店类型相关。
每次点击我们都需要更新require中的相应内容,如选择type时,我们将对应的type添加到数组中,当取消选择时我们又将对应的type从数组中移除。
for(var i=0;i<checkbox.length;i++){
checkbox[i].onclick = function(){
if(this.checked){
switch (this. getAttribute('data-label')){
case 'price':{
var price = (this.value).split(',');
require.price.push(parseInt(price[0]),parseInt(price[1]));
break;
}
case 'type':{
require.type.push(parseInt(this.value));
break;
}
}
}
else{
switch (this. getAttribute('data-label')){
case 'price':{
var price = (this.value).split(',');
var index = require.price.indexOf(parseInt(price[0]));
require.removeEle(index,'price');
var index = require.price.indexOf(parseInt(price[1]));
require.removeEle(index,'price');
break;
}
case 'type':{
var index = require.type.indexOf(parseInt(this.value));
require.removeEle(index,'type');
break;
}
}
}
}
}
4、生成filter
通过require的内容生成filter,需要注意的是用户没有选择时我们加载所有数据这种情况
function getFilter(require){
var filter = '';
if(require.price[0] === 0 || require.price[0]){
var price = 'price:' + require.getMin() + ',' +require.getMax();
filter += price;
}
console.log(require.type.length);
var type = require.type.length !==0 ? '|hotel_type:['+ require.type.join(',')+']' :'';
filter += type;
return filter;
}
完成点击选择酒店类型时的case部分代码。
require.type.push(parseInt(this.value));