欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

一行多列的下拉多选框

程序员文章站 2024-01-01 10:00:22
...

一行多列的下拉多选框

很简单的一行多列的下拉多选框,就当是学习编写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 // 点击选中项的回调函数
});

示例图

一行多列的下拉多选框

上一篇:

下一篇: