|
* @Author：虾兵 @Blog：http://ddbing.com/
* @param options: 前台传过来的参数，格式如：
{
title:null,
pid:‘screen-wrap‘,
cid:‘platform‘,
data:null,
rows: 2,
ok:true,
okVal: ‘\u786E\u5B9A‘,
callback:null
};。
* @param title: 筛选模块标题，默认为空。
* @param pid: 筛选模块的父级id，默认id为 screen-wrap。
* @param cid: 筛选模块id,以区分多个筛选模块的情况，默认id为 platform，代表平台。
* @param data: 后台传过来的数据，格式如：
[
{"id":"27","name":"6a818a"},
{"id":"38","name":"6a818b"}
];。
* @param ok: 是否显示确定按钮，默认显示为：true。
* @param okVal: 确定按钮的文字，默认为：确定。
* @param rows: 默认显示多少行，超出出现 ‘更多‘ 按钮，默认为2行。
* @param callback: 回调函数，返回选中的数据,格式JSON,撤销全部返回空数组[]。
*/
;(function ($, window, document, undefined) {
var QueryScreen = function(options){
this.opts = $.extend({},this.defaults,options);
this.arrSelect = [];
};
QueryScreen.prototype = {
constructor:QueryScreen,
init: function(){
var that = this, opts = that.opts, pid = opts.pid, temp = that.getTemp();
$(‘#‘+pid).append(temp);
that.handleRows()
.handleMore()
.handleList()
.selectAll();
},
//处理行及是否显示更多按钮
handleRows: function(){
var that = this, opts = that.opts, _$cid = $(‘#‘+opts.cid), rows = opts.rows, nums = 6*rows, dataLen = opts.data.length;
if ( dataLen-nums <= 0 ) {
_$cid.find(‘.more‘).addClass(‘hide‘);
}else{
nums = nums-1;
_$cid.find(‘.lists li:gt(‘+nums+‘)‘).addClass(‘hide‘);
};
return that;
},
//处理更多按钮
handleMore: function(){
var that = this, opts = that.opts, _$cid = $(‘#‘+opts.cid), rows = opts.rows, nums = 6*rows-1;
_$cid.find(‘.more‘).children(‘a‘).on(‘click‘, function(){
var t = $(this);
if(t.hasClass(‘up‘)){
t.removeClass(‘up‘);
_$cid.find(‘.lists li:gt(‘+nums+‘)‘).slideUp(‘fast‘);
}else{
t.addClass(‘up‘);
_$cid.find(‘.lists li‘).slideDown(‘fast‘);
}
});
return that;
},
//处理点击选择选项后
handleList: function(){
var that = this, opts = that.opts, _$cid = $(‘#‘+opts.cid), _$lists = _$cid.find(‘li a‘), arrSelect = that.arrSelect, dataLen = opts.data.length;
var Selected = function (id,name){
this.id = id;
this.name = name;
};
_$lists.on(‘click‘, function(){
var t = $(this), dataId, name, activeLen = _$cid.find(‘.lists‘).find(‘.active‘).length + 1;
dataId = $.trim(t.attr(‘data-id‘));
name = $.trim(t.text());
if(t.hasClass(‘active‘)){
$.each(arrSelect, function(key,value){
if (value && value.id && value.id == dataId) {
arrSelect.splice(key,1);
};
});
t.removeClass(‘active‘);
_$cid.find(‘.handler a‘).eq(0).removeClass(‘active‘);
that.callback(arrSelect);
}else{
t.addClass(‘active‘);
arrSelect.push(new Selected(dataId,name));
if (activeLen === dataLen) {
_$cid.find(‘.handler a‘).eq(0).trigger(‘click‘);
}else{
that.callback(arrSelect);
};
};
});
return that;
},
//处理全选、撤销全选
selectAll: function(){
var that = this, opts = that.opts, _$cid = $(‘#‘+opts.cid), _$lists = _$cid.find(‘li a‘), _$a = _$cid.find(‘.handler a‘),arrSelect = that.arrSelect;
_$a.eq(0).on(‘click‘, function(){
var t = $(this);
t.addClass(‘active‘);
_$lists.addClass(‘active‘);
that.callback(-1);
});
_$a.eq(1).on(‘click‘,function(){
_$lists.removeClass(‘active‘);
arrSelect.length = 0;
that.callback([]);
_$lists.removeClass(‘active‘);
_$a.eq(0).removeClass(‘active‘);
});
return that;
},
//选择后的回调数据
callback: function(data){
var that = this, opts = that.opts,_data = opts.data,arrSelect=this.arrSelect,json_data = JSON.stringify(this.arrSelect),all_data=JSON.stringify([{‘id‘:‘-1‘,‘name‘:‘全部‘}]);
if (‘function‘ === typeof opts.callback) {
if (data === -1) {
opts.callback(all_data);
arrSelect.length = 0;
$.each(_data,function(i,val){
arrSelect.push({‘id‘:val.id,‘name‘:val.name});
});
}else{
opts.callback(json_data);
}
};
return that;
},
//处理模板
getTemp: function(){
var that = this, temp = ‘‘, dataTemp = that.dataTemp(), opts = that.opts, okTemp = that.okTemp(), title = opts.title;
temp += ‘‘
+‘‘+ title +‘全选撤销全部‘
+‘‘
+‘‘
+‘‘+ dataTemp +‘‘
+‘‘
+‘‘
+‘更多‘
+‘‘
+‘‘
+ okTemp
+‘‘;
return temp;
},
//处理数据模板
dataTemp: function(){
var temp = ‘‘, opts = this.opts, data = opts.data;
$.each(data, function(key,value){
temp += ‘‘+ value.name +‘‘;
});
return temp;
},
//处理是否显示确定按钮
okTemp: function(){
var temp = ‘‘, opts = this.opts, isOk = opts.ok, okVal = opts.okVal;
if(isOk){
temp += ‘‘
+‘‘+ okVal +‘‘
+‘‘;
};
return temp;
},
//默认参数配置
defaults: function(){
var config = {
title:null,
pid:‘screen-wrap‘,
cid:‘platform‘,
data:null,
rows: 2,
ok:true,
okVal: ‘\u786E\u5B9A‘,
callback:null
};
return config;
}(),
};
window.QueryScreen = QueryScreen;
}(jQuery, window, document));
|
