JS可复用的多条件筛选插件

这是最近公司的一个系统需要用到的筛选功能，为了方便日后维护迭代升级，功能的增加，我写了一个插件，支持自定义模块、自定义默认显示几行，超出后出现更多按钮以及是否显示确定按钮， 不管一个页面中有多少个筛选模块，都可复用，只需要后台传给json数据，操作后通过回调函数实时返给后台同样的数据格式，以达到数据、表现、操作的分离。

这个插件使用非常方便，支持自定义模块、自定义默认显示几行，超出后出现更多按钮以及是否显示确定按钮等等功能。

下面直接上代码：

* @Author：虾兵  @Blog：http://ddbing.com/

* @param   options: 前台传过来的参数，格式如：

            {

            title:null,

            pid:'screen-wrap',

            cid:'platform',

            data:null,

            rows: 2,

            ok:true,

            okVal: 'u786Eu5B9A',

            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: 'u786Eu5B9A',

                callback:null

            };

            return config;

        }(),

    };

    window.QueryScreen = QueryScreen;

}(jQuery, window, document));

这个插件你可以用到你网站的任何地方，商业非商业都行，不过恳请仁兄使用时保留备注或者注明代码来源，以对我写代码的鼓励及脑细胞的补偿，也方便日后迭代更新。使用时样式皮肤自行美化。