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

这是最近公司的一个系统需要用到的筛选功能，为了方便日后维护迭代升级，功能的增加，我写了一个插件，支持自定义模块、自定义默认显示几行，超出后出现更多按钮以及是否显示确定按钮， 不管一个页面中有多少个筛选模块，都可复用，只需要后台传给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));

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

posted @ 2015-09-20 21:47  不忘前行  阅读(1498)  评论(0)  编辑  收藏  举报