这是最近公司的一个系统需要用到的筛选功能，为了方便日后维护迭代升级，功能的增加，我写了一个插件，支持自定义模块、自定义默认显示几行，超出后出现更多按钮以及是否显示确定按钮， 不管一个页面中有多少个筛选模块，都可复用，只需要后台传给json数据，操作后通过回调函数实时返给后台同样的数据格式，以达到数据、表现、操作的分离。
这个插件使用非常方便，支持自定义模块、自定义默认显示几行，超出后出现更多按钮以及是否显示确定按钮等等功能。
下面直接上代码：
* @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));
|
这个插件你可以用到你网站的任何地方，商业非商业都行，不过恳请仁兄使用时保留备注或者注明代码来源，以对我写代码的鼓励及脑细胞的补偿，也方便日后迭代更新。使用时样式皮肤自行美化。
1157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
