多选下拉控件multiselect使用小结

转载 (原文地址) 周美娜 随笔 待整理 140阅读 2018-06-28 18:20:28 举报

项目开发中,需要用到多选下拉列表插件,由于项目前端框架采用了bootstrap,因此自然选择了bootstrap的组件。经了解其有两组插件:

1、第一个组件是写bootstrap table的主人公 wenzhixin 封装的一个组件—— multiple-select 。这个组件风格简单、文档全、功能强大。

Multiple-Select源码主页: https://github.com/wenzhixin/multiple-select

Multiple-Select文档以及Demo: http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN

2、第二个组件:bootstrap-multiselect 。这个组件风格和第一个非常相似,文档也挺全面。

bootstrap-multiselect源码主页: https://github.com/davidstutz/bootstrap-multiselect

bootstrap-multiselect文档以及Demo: http://davidstutz.github.io/bootstrap-multiselect/

笔者参考了“http://www.tuicool.com/articles/ANn2qa3”这篇文章进行初步了解

在开发实践中,我使用了第2个组件:bootstrap-multiselect,对于第一组插件并未尝试实践。参考bootstrap-multiselect的api,使用起来还算顺利,常规用到以下属性:

var multiSelectOption={
        maxHeight:300,
        numberDisplayed:3, 
        optionClass: function(element) {
            var value = $(element).parent().find($(element)).index();
            if (value%2 == 0) {
                return 'even';
            }
            else {
                return 'odd';
            }
        },
        includeSelectAllOption: true,
        enableFiltering: true,
        selectAllJustVisible: true
};

分别为控制下拉容器最大高度、最多允许具体展示选中项数(其余以数字形式展示)、隔行换色控制、全选、支持检索。

<select class= "form-control myOwnDll"><option></option>...</select>

笔者数据源从后台动态获取

效果如下图:

根据页面排版想要控制其宽度自定义,因此给select标签设置宽度属性width,发现怎么也不生效,后来查看源码才发现,本插件是将select插件隐藏,在其下方生成了一组新标签用来呈现多选下拉样式(template)。因此要面临的第一个问题便是:自定义该多选下拉框的宽度。该宽度涉及三方面:btn组、显示选中结果span、下拉容器ul。为了能够控制到生成的多选下拉框组件,因此需要再包一层div:

<div class="myOwnDdl">
     <select class= "form-control"></select>
</div>

然后通过添加以下css样式类可有效控制多选下拉框的宽度:

/*自定义宽度*/
.myOwnDdl{
    display:inline-block;
    width:40%;
}

/* 实现宽度自定义 */
.myOwnDdl .btn-group{
    width:100%;
}
.myOwnDdl .multiselect {
    width:100%;
    text-align:right;
    margin-top:-5px;
}
.myOwnDdl ul {
    width:100%;
}
.myOwnDdl .multiselect-selected-text {
    position:absolute;
    left:0;
    right:25px;
    text-align:left;
    padding-left:20px;
}

/*控制隔行换色*/
.myOwnDll .multiselect-container li.odd {
    background: #eeeeee;
}

效果图如下:

即:使用时,在其上再包一层样式类包含myOwnDdl的div,则多选下拉列表即可与myOwnDdl容器的定义宽度一致。

继续开发,遇到另一需求:某些条件下,控制下拉列表可多选,某些条件下控制其为单选。

因此便开始找设置单选属性,根据api马上找到multiple属性,于是尝试:

$dom.multiselect({multile:false});

并没有任何效果,后来查看源码得知,本控件的单选及多选控制,是通过标签的multiple属性控制的,如果标签中有multiple属性,则为多选,否则为单选,本需求中需要将已经初始化为多选的下拉列表改为单选,如果将已有控件删除,重新添加再重新绑定数据源初始化,似乎代价有些大,就像让你给已有的房子加盖一间卫生间,而你的方式是拆了房子重新盖一样。对于已有插件,果真不能瞎琢磨,还是多看看官方文档,于是发现了.multiselect('destroy'),原理差不多,但性能上要好多了,因此通过以下方案实现多选变更为单选:

if($conditionDom.val()==="equals"||$conditionDom.val()==="not_equals"){
    $dllDom.removeAttr("multiple");
}else{
    $dllDom.attr("multiple","multiple");
}
$dllDom.multiselect("destroy").multiselect(multiSelectOption);

本次实践,遇到的问题总结大概就这么多了,另外在绑定值或清空时,仅val([])未生效(本赋值方式需使用数组),需要再执行refresh才生效:

$dom.multiselect().val([]).multiselect("refresh")

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复