bootstrap multiselect两大组件

转载

mob60475701b76f 2016-03-20 12:18:00

文章标签 Bootstrap bootstrap 默认值 github css 文章分类 运维

组件说明以及API

1、第一个组件——multiple-select。这个组件风格简单、文档全、功能强大。但是觉得它选中的效果不太好。关于它的效果展示，我们放在后面。

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

既然是bootstrap的组件，肯定需要bootstrap的支持。我们来看看需要引用的js

Bootstrap-multiselect组件

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

 <script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
 <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

 <script src="~/Content/multiselect_davidstutz/js/bootstrap-multiselect.js"></script>
 <link href="~/Content/multiselect_davidstutz/css/bootstrap-multiselect.css" rel="stylesheet" />

<form id="formSearch" class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-xs-1">原始Select</label>
                        <div class="col-xs-2" style="margin-top:7px;">
                            <select style="width:150px" multiple="multiple">
                                <option value="0">未排产</option>
                                <option value="5">已排产</option>
                                <option value="10">已锁定</option>
                                <option value="25">在制</option>
                                <option value="20">订单提交</option>
                                <option value="30">订单删除</option>
                                <option value="50">订单报废</option>
                            </select>
                        </div>

                        <label class="control-label col-xs-1" for="sel_search_orderstatus">多选站点</label>
                        <div class="col-xs-2" style="margin-top:7px;">
                            <select id="sel_search_orderstatus" style="width:150px" multiple="multiple">
                                <option value="0">未排产</option>
                                <option value="5">已排产</option>
                                <option value="10">已锁定</option>
                                <option value="25">在制</option>
                                <option value="20">订单提交</option>
                                <option value="30">订单删除</option>
                                <option value="50">订单报废</option>
                            </select>
                        </div>

                        <label class="control-label col-xs-1" for="sel_search_orderstatus2">disabled Select</label>
                        <div class="col-xs-2" style="margin-top:7px;">
                            <select id="sel_search_orderstatus2" style="width:150px" multiple="multiple">
                                <option value="0">未排产</option>
                                <option value="5" selected="selected">已排产</option>
                                <option value="10" selected="selected">已锁定</option>
                                <option value="25" disabled="disabled">在制</option>
                                <option value="20" disabled="disabled">订单提交</option>
                                <option value="30" disabled="disabled" selected="selected">订单删除</option>
                                <option value="50">订单报废</option>
                            </select>
                        </div>

                        <label class="control-label col-xs-1" for="sel_search_orderstatus3">分组</label>
                        <div class="col-xs-2" style="margin-top:7px;">
                            <select id="sel_search_orderstatus3" style="width:150px" multiple="multiple">
                                <optgroup label="未上线">
                                    <option value="0">未排产</option>
                                </optgroup>
                                <optgroup label="已上线">
                                    <option value="5">已排产</option>
                                    <option value="10" selected="selected">已锁定</option>
                                    <option value="25" disabled="disabled">在制</option>
                                    <option value="20">订单提交</option>
                                </optgroup>
                                <optgroup label="异常">
                                    <option value="30">订单删除</option>
                                    <option value="50">订单报废</option>
                                </optgroup>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-1" for="sel_search_orderstatus4">单选</label>
                        <div class="col-xs-2" style="margin-top:7px;">
                            <select id="sel_search_orderstatus4">
                                <option value="0">未排产</option>
                                <option value="5">已排产</option>
                                <option value="10">已锁定</option>
                                <option value="25">在制</option>
                                <option value="20">订单提交</option>
                                <option value="30">订单删除</option>
                                <option value="50">订单报废</option>
                            </select>
                        </div>

                        <label class="control-label col-xs-1" for="sel_search_orderstatus5">筛选</label>
                        <div class="col-xs-2" style="margin-top:7px;">
                            <select id="sel_search_orderstatus5" style="width:150px" multiple="multiple">
                                <option value="0">未排产</option>
                                <option value="5">已排产</option>
                                <option value="10">已锁定</option>
                                <option value="25">在制</option>
                                <option value="20">订单提交</option>
                                <option value="30">订单删除</option>
                                <option value="50">订单报废</option>
                            </select>
                        </div>

                        <label class="control-label col-xs-1" for="sel_search_orderstatus">设置文本</label>
                        <div class="col-xs-2" style="margin-top:7px;">
                            <select id="sel_search_orderstatus6" style="width:150px" multiple="multiple">
                                <option value="0">未排产</option>
                                <option value="5">已排产</option>
                                <option value="10">已锁定</option>
                                <option value="25">在制</option>
                                <option value="20">订单提交</option>
                                <option value="30">订单删除</option>
                                <option value="50">订单报废</option>
                            </select>
                        </div>
                    </div>
                </form>

$(function () {

    $('#sel_search_orderstatus').multiselect();

    $('#sel_search_orderstatus2').multiselect();

    $('#sel_search_orderstatus3').multiselect({
        enableCollapsibleOptGroups: true
    });

    $('#sel_search_orderstatus4').multiselect();

    $('#sel_search_orderstatus5').multiselect({
        enableFiltering: true
    });


    $('#sel_search_orderstatus6').multiselect({
        nonSelectedText: '多项选择',
        nSelectedText: '项',
        allSelectedText: '所有项',
        selectAllText: '所有项'
    });
});

效果：

bootstrap multiselect两大组件_Bootstrap

multiple-select组件：

@*Jquery*@
<script src="~/Scripts/jquery-1.10.2.min.js"></script>

@*bootstrap*@
<script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

@*multiple-select*@
<script src="~/Content/multiselect_wenzhixin/multiple-select-master/multiple-select.js"></script>
<link href="~/Content/multiselect_wenzhixin/multiple-select-master/multiple-select.css" rel="stylesheet" />

<div class="panel-body" style="padding:0px;">
        <div class="panel panel-default">
            <div class="panel-heading">查询条件</div>
            <div class="panel-body">
                <form id="formSearch" class="form-horizontal">
                    <div class="form-group">
                        <label class="control-label col-xs-1">原始Select</label>
                        <div class="col-xs-2" style="margin-top:7px;">
                            <select style="width:150px" multiple="multiple">
                                <option value="0">未排产</option>
                                <option value="5">已排产</option>
                                <option value="10">已锁定</option>
                                <option value="25">在制</option>
                                <option value="20">订单提交</option>
                                <option value="30">订单删除</option>
                                <option value="50">订单报废</option>
                            </select>
                        </div>

                        <label class="control-label col-xs-1" for="sel_search_orderstatus">多选站点</label>
                        <div class="col-xs-2" style="margin-top:7px;">
                            <select id="sel_search_orderstatus" style="width:150px" multiple="multiple">
                                <option value="0">未排产</option>
                                <option value="5">已排产</option>
                                <option value="10">已锁定</option>
                                <option value="25">在制</option>
                                <option value="20">订单提交</option>
                                <option value="30">订单删除</option>
                                <option value="50">订单报废</option>
                            </select>
                        </div>

                        <label class="control-label col-xs-1" for="sel_search_orderstatus2">disabled Select</label>
                        <div class="col-xs-2" style="margin-top:7px;">
                            <select id="sel_search_orderstatus2" style="width:150px" multiple="multiple">
                                <option value="0">未排产</option>
                                <option value="5" selected="selected">已排产</option>
                                <option value="10" selected="selected">已锁定</option>
                                <option value="25" disabled="disabled">在制</option>
                                <option value="20" disabled="disabled">订单提交</option>
                                <option value="30" disabled="disabled" selected="selected">订单删除</option>
                                <option value="50">订单报废</option>
                            </select>
                        </div>

                        <label class="control-label col-xs-1" for="sel_search_orderstatus3">分组</label>
                        <div class="col-xs-2" style="margin-top:7px;">
                            <select id="sel_search_orderstatus3" style="width:150px" multiple="multiple">
                                <optgroup label="未上线">
                                    <option value="0">未排产</option>
                                </optgroup>
                                <optgroup label="已上线">
                                    <option value="5">已排产</option>
                                    <option value="10">已锁定</option>
                                    <option value="25">在制</option>
                                    <option value="20">订单提交</option>
                                </optgroup>
                                <optgroup label="异常">
                                    <option value="30">订单删除</option>
                                    <option value="50">订单报废</option>
                                </optgroup>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-1" for="sel_search_orderstatus4">单选</label>
                        <div class="col-xs-2" style="margin-top:7px;">
                            <select id="sel_search_orderstatus4" style="width:150px" multiple="multiple">
                                <option value="0">未排产</option>
                                <option value="5">已排产</option>
                                <option value="10">已锁定</option>
                                <option value="25">在制</option>
                                <option value="20">订单提交</option>
                                <option value="30">订单删除</option>
                                <option value="50">订单报废</option>
                            </select>
                        </div>

                        <label class="control-label col-xs-1" for="sel_search_orderstatus5">筛选</label>
                        <div class="col-xs-2" style="margin-top:7px;">
                            <select id="sel_search_orderstatus5" style="width:150px" multiple="multiple">
                                <option value="0">未排产</option>
                                <option value="5">已排产</option>
                                <option value="10">已锁定</option>
                                <option value="25">在制</option>
                                <option value="20">订单提交</option>
                                <option value="30">订单删除</option>
                                <option value="50">订单报废</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

$(function () {

    $('#sel_search_orderstatus').multipleSelect();

    $('#sel_search_orderstatus2').multipleSelect();

    $('#sel_search_orderstatus3').multipleSelect({
        placeholder: "请选择"
    });

    $('#sel_search_orderstatus4').multipleSelect({
        placeholder: "请选择",
        single: true
    });

    $('#sel_search_orderstatus5').multipleSelect({
        placeholder: "请选择",
        filter: true
    });
})

组件效果：

bootstrap multiselect两大组件_bootstrap_02

比较重要的参数说明：

isOpen

类型: boolean

是否打开下拉列表。

默认值为 false 。

placeholder

类型: string

显示默认的提示信息。

默认值为 '' 。

selectAll

类型: boolean

是否显示全选复选框。

默认值为 true 。

selectAllText

类型: string

全选复选框的显示内容。

默认值为 Select all 。

multiple

类型: boolean

是否在一行中显示多个选项。

默认值为 false 。

multipleWidth

类型: integer

一行中每个选项的宽度。

默认值为 80 。

single

类型: boolean

是否只允许你选择一行。

默认值为 false 。

position

类型: string

定义下拉列表的位置，只能是 bottom 或者 top 。

默认值为 bottom .

filter

类型: boolean

是否开启过滤功能。

默认值为 false 。

width

类型: integer

定义下拉列表的宽度。

默认值为 undefined 。默认与 select 的宽度相同。

maxHeight

类型: integer

下拉列表的最大高度。

默认值为 250 。

常用事件：

onOpen

当下拉列表被打开时触发。

onClose

当下拉列表被关闭时触发。

onCheckAll

点击全选或者调用 “checkall” 方法时触发。

onUncheckAll

点击全不选或者调用 “uncheckall” 方法时触发。

onOptgroupClick

点击分组时触发。

onClick

点击一个复选框时触发

常用方法：

getSelects

获取 Multiple Select 选择内容。

参数: type

类型: string

选择内容的类型，value 或者 text。

默认值为 value 。

setSelects

设置 Multiple Select 的内容。

参数: values

类型: array

选择框的内容信息。

enable

启用 Multiple Select。

disable

禁用 Multiple Select。在这种模式下，不允许用户操作。

checkAll

全选所有的复选框。

$('select').multipleSelect('checkAll');

uncheckAll

全不选所有的复选框。

$('select').multipleSelect('uncheckAll');

refresh

重新加载 Multiple Select。

假如你是通过 AJAX 或者 DOM 来手动添加或者删除 option 选项，可以通过 refresh 方法来重新加载 Multiple Select。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：Java代码规范

下一篇：asp.net 中一次性更新所有GRIDVIEW的记录(转)

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

bootstrap multiselect两大组件

bootstrap multiselect两大组件

51CTO博客