这是最近公司的一个系统需要用到的筛选功能，为了方便日后维护迭代升级，功能的增加，我写了一个插件，支持自定义模块、自定义默认显示几行，超出后出现更多按钮以及是否显示确定按钮， 不管一个页面中有多少个筛选模块，都可复用，只需要后台传给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)); |
这个插件你可以用到你网站的任何地方，商业非商业都行，不过恳请仁兄使用时保留备注或者注明代码来源，以对我写代码的鼓励及脑细胞的补偿，也方便日后迭代更新。使用时样式皮肤自行美化。
原文：http://www.cnblogs.com/liqingbo/p/4824440.html