一行多列的下拉多选框

一行多列的下拉多选框

很简单的一行多列的下拉多选框，就当是学习编写jquery插件的例子，该例子依赖jquery

相关js代码：

/**
 *  下拉多选插件，支持一行显示过个input框，显示多行
 *   by warhorse
 */
(function($){
    "use strict";

    var SelectCheckBox = function(element, options){
        this.$element = $(element);
        this.options = $.extend({}, SelectCheckBox.DEFAULTS, options); //使用jQuery.extend 覆盖插件默认参数

        // 多选框的名称
        if(!this.options.inputName){
            this.options.inputName = this.$element.attr("name");
            if(!this.options.inputName){
                this.options.inputName = this.$element.attr("id");
                this.options.inputName = this.options.inputName;
            }
        }

        // 获取并转换list为数组，支持数组类型[{'code':1, 'name':'aa'}]，支持字符串类型："1:aa;2:bb"，支持对象{1:'aa', 2:'bb'}
        if(!this.options.list){
            this.options.list = this.$element.attr("list");
        }
        if(this.options.list && !$.isArray(this.options.list)){ // 1:aa;2:bb
            var list = [];
            var listType = typeof this.options.list;
            if(listType === 'string'){
                var entries = this.options.list.split(';');
                for(var i = 0; entries && i < entries.length; i++){
                    var entry = entries[i];
                    var values = entry.split(":");
                    list.push({'code': values[0], 'name':values[1]});
                }

            }else if(listType === 'object'){
                for(var key in this.options.list){
                    list.push({'code': key, 'name':this.options.list[key]});
                }
            }
            //
            this.options.list = list;
        }

        // 获取并转换data，支持数组类型[1,2,3]，支持字符串类型："1,2,3"
        if(!this.options.data){
            this.options.data = this.$element.attr("data");
        }
        if(this.options.data && !$.isArray(this.options.data)){
            this.options.data = this.options.data.split(',');
        }

    };

    SelectCheckBox.DEFAULTS = {
            list: null, // 支持数组类型[{'code':1, 'name':'aa'}]，支持字符串类型："1:aa;2:bb"
            data: '', // 支持数组类型[1,2,3]，支持字符串类型："1,2,3"
            col: 4, //默认一行4个
            formatter: null,
            seperator: '，',
            noneSelectedText: '请选择',
            width: 100,
            height: 100,
            onchange: null
    };

    SelectCheckBox.prototype.create = function () {
        var opts = this.options;

        // li的宽度百分比
        var liWidth = 100 / opts.col; 
        liWidth += '%';

        var width = this.$element.attr("width");
        if(!width){
            width = this.$element.width();
        }

        var lis = '';
        var title = ''; // 选中值对应的文字
        for(var i = 0; i < opts.list.length; i++){
            var entry = opts.list[i];

            var checked = false;
            for(var j = 0; opts.data && j < opts.data.length; j++){
                if(entry['code'] == opts.data[j]){
                    checked = true;
                    title += entry['name'] + opts.seperator;
                }
            }

            if(opts.formatter){
                var inputHtml = opts.formatter.call(this, entry, checked);
                lis += '<li align="left" style="width:'+liWidth+'">'+inputHtml+'</li>';

            }else{
                var checkedStr = checked ? 'checked="checked"' : '';
                lis += '<li align="left" style="width:'+liWidth+'"><label><input type="checkbox" name="'+opts.inputName+'" value="'+entry['code']+'" '+checkedStr+'/>'+entry['name']+'</label></li>';
            }
        }

        if(title){
            if(opts.seperator){
                title = title.substring(0, title.length - opts.seperator.length);
            }
        }else{
            title = opts.noneSelectedText;
        }

        // 主要的html代码
        var div = '<div class="selectCheckbox" id="scb_'+opts.inputName+'" style="width:100%; height:100%;cursor:pointer;">'
                +   '<div class="inputDiv" style="width:'+width+'px;overflow:hidden;">'
                +     '<p>'+title+'</p>'
                +   '</div>'
                +   '<div class="selectDiv" style="position:absolute; width:'+width+'px; display: none;" >'
                +     '<ul>'
                +        lis
                +     '</ul>'
                +   '</div>'
                +   '</div>';

        this.$element.append(div);
    };

    // 绑定事件
    SelectCheckBox.prototype.bindEvent = function(){
        var self = this;
        var $this = this.$element;
        var opts = this.options;
        // 绑定事件
        var inputDiv = $this.find(".inputDiv");
        var selecDiv = $this.find(".selectDiv");
        // 点击显示下拉框事件
        inputDiv.bind('click', function(){
            selecDiv.toggle();
        });
        // 鼠标离开选择面板隐藏下拉框事件
        $this.bind('mouseleave',function(){
            selecDiv.hide();
        });
        // 选择值后将选中的值显示在显示框上的事件
        selecDiv.find("input").bind('click',function(){
            self.fefresh();
        });
    };

    // 刷新显示
    SelectCheckBox.prototype.fefresh = function(){
        var self = this;
        var opts = this.options;
        var $this = this.$element;
        var data = [];
        var title = '';
        $this.find("input:checked").each(function(){
            title += $(this).parent("label").text() + opts.seperator;
            data.push($(this).val());
        });

        if(title){
            if(opts.seperator){
                title = title.substring(0, title.length - opts.seperator.length);
            }
        }else{
            title = opts.noneSelectedText;
        }

        $this.find(".selectCheckbox").find(".selectDiv").prev(".inputDiv").find("p").text(title);
        // 执行回调函数
        if(opts.onchange){
            opts.onchange.call(self, data.toString());
        }
        // 
        opts.data = data;
    };

    // 全不选
    SelectCheckBox.prototype.clear = function(){
        this.$element.find("input").attr("checked", false);
        this.fefresh();
    };

    // 全选
    SelectCheckBox.prototype.selectAll = function(){
        this.$element.find("input").attr("checked", true);
        this.fefresh();
    };

    // 设置选中的值
    SelectCheckBox.prototype.setData = function(data){
        if(data && !$.isArray(data)){
            data = data.split(',');
        }
        if(data && data.length > 0){
            this.$element.find("input").each(function(){
                var val = $(this).val();
                if($.inArray(val, data) > -1){
                    $(this).attr("checked", true);
                }
            });
            //
            this.fefresh();
        }

        return this;
    };

    // 获取选中的值
    SelectCheckBox.prototype.getSelected = function(){
        return this.options.data;
    };

    $.fn.selectCheckBox = function(options){
        var $this = $(this);
        // 判断是否初始化过的依据
        var scb = $this.data('selectCheckBox');

        if(!scb){
            var opts = typeof options == 'object' && options;
            // 初始化并缓存
            $this.data('selectCheckBox', (scb = new SelectCheckBox(this, opts)));
            // 创建节点
            scb.create();
            // 绑定事件
            scb.bindEvent();
        }

        // 调用方法
        if (typeof options === 'string') {
            if(scb){
                var fn = scb[options];
                if (!fn) {
                    throw ("selectCheckBox - No such method: " + options);
                }
                var args = $.makeArray(arguments).slice(1);
                return fn.apply(scb, args);
            }
        }

        return scb;
    };

})(jQuery);

相关css

.selectCheckbox .inputDiv{
    height:20px; 
    line-height:20px; 
    padding:2px 5px; 
    border:1px solid #CFCFCF; 
    background-color: rgba(255, 255, 255, 1);
    background-image: url('${ctx}/resource/images/arrow3_d.png');
    background-repeat: no-repeat;
    background-position: 99% 50%;
}
.selectCheckbox .selectDiv{
    padding:2px 5px; 
    border:1px solid #CFCFCF;
    background-color: #F8F8F8; 
    z-index: 1000;
    height: auto;
    line-height: 31px;
}
.selectCheckbox li{
    list-style-type: none;
    float: left;
}

调用方式：

• html写法

<div name="outOrgType"></div>

• 调用js写法：

$("div[name='outOrgType']").selectCheckBox({
    list: '1:aa;2:bb;3:cc', // 支持数组类型[{'code':1, 'name':'aa'}]，支持字符串类型："1:aa;2:bb"
    data: '1,2', // 支持数组类型[1,2,3]，支持字符串类型："1,2,3"
    col: 4, //默认一行4个
    formatter: null,
    seperator: '，', // 标题显示的分隔符
    noneSelectedText: '请选择', //没有选项的时候显示的标题
    onchange: null // 点击选中项的回调函数
});

示例图