bootstrap multiselect两大组件

组件说明以及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="">未排产</option>

                                <option value="">已排产</option>

                                <option value="">已锁定</option>

                                <option value="">在制</option>

                                <option value="">订单提交</option>

                                <option value="">订单删除</option>

                                <option value="">订单报废</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="">未排产</option>

                                <option value="">已排产</option>

                                <option value="">已锁定</option>

                                <option value="">在制</option>

                                <option value="">订单提交</option>

                                <option value="">订单删除</option>

                                <option value="">订单报废</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="">未排产</option>

                                <option value="" selected="selected">已排产</option>

                                <option value="" selected="selected">已锁定</option>

                                <option value="" disabled="disabled">在制</option>

                                <option value="" disabled="disabled">订单提交</option>

                                <option value="" disabled="disabled" selected="selected">订单删除</option>

                                <option value="">订单报废</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="">未排产</option>

                                </optgroup>

                                <optgroup label="已上线">

                                    <option value="">已排产</option>

                                    <option value="" selected="selected">已锁定</option>

                                    <option value="" disabled="disabled">在制</option>

                                    <option value="">订单提交</option>

                                </optgroup>

                                <optgroup label="异常">

                                    <option value="">订单删除</option>

                                    <option value="">订单报废</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="">未排产</option>

                                <option value="">已排产</option>

                                <option value="">已锁定</option>

                                <option value="">在制</option>

                                <option value="">订单提交</option>

                                <option value="">订单删除</option>

                                <option value="">订单报废</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="">未排产</option>

                                <option value="">已排产</option>

                                <option value="">已锁定</option>

                                <option value="">在制</option>

                                <option value="">订单提交</option>

                                <option value="">订单删除</option>

                                <option value="">订单报废</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="">未排产</option>

                                <option value="">已排产</option>

                                <option value="">已锁定</option>

                                <option value="">在制</option>

                                <option value="">订单提交</option>

                                <option value="">订单删除</option>

                                <option value="">订单报废</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: '所有项'

    });

});

效果：

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="">未排产</option>

                                <option value="">已排产</option>

                                <option value="">已锁定</option>

                                <option value="">在制</option>

                                <option value="">订单提交</option>

                                <option value="">订单删除</option>

                                <option value="">订单报废</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="">未排产</option>

                                <option value="">已排产</option>

                                <option value="">已锁定</option>

                                <option value="">在制</option>

                                <option value="">订单提交</option>

                                <option value="">订单删除</option>

                                <option value="">订单报废</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="">未排产</option>

                                <option value="" selected="selected">已排产</option>

                                <option value="" selected="selected">已锁定</option>

                                <option value="" disabled="disabled">在制</option>

                                <option value="" disabled="disabled">订单提交</option>

                                <option value="" disabled="disabled" selected="selected">订单删除</option>

                                <option value="">订单报废</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="">未排产</option>

                                </optgroup>

                                <optgroup label="已上线">

                                    <option value="">已排产</option>

                                    <option value="">已锁定</option>

                                    <option value="">在制</option>

                                    <option value="">订单提交</option>

                                </optgroup>

                                <optgroup label="异常">

                                    <option value="">订单删除</option>

                                    <option value="">订单报废</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="">未排产</option>

                                <option value="">已排产</option>

                                <option value="">已锁定</option>

                                <option value="">在制</option>

                                <option value="">订单提交</option>

                                <option value="">订单删除</option>

                                <option value="">订单报废</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="">未排产</option>

                                <option value="">已排产</option>

                                <option value="">已锁定</option>

                                <option value="">在制</option>

                                <option value="">订单提交</option>

                                <option value="">订单删除</option>

                                <option value="">订单报废</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

    });

})

组件效果：

比较重要的参数说明：

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。

第一个组件是写bootstrap table的主人公 wenzhixin 封装的一个组件—— multiple-select。这个组件风格简单、文档全、功能强大。但是觉得它选中的效果不太好。关于它的效果展示，我们放在后面。还是给出对应的文档API。

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、第二个组件也是在github上面找的—— bootstrap-multiselect 。这个组件风格和第一个非常相似，文档也挺全面。

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

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

Bootstrap-select多选下拉框实现：http://www.cnblogs.com/anny0404/p/5329960.html

jQuery multiselect： http://loudev.com/

JS组件系列——Bootstrap Select2组件（http://www.tuicool.com/articles/nYVn22e）

一、组件说明以及API说明

Select2使用示例地址： https://select2.github.io/examples.html

Select2参数文档说明： https://select2.github.io/options.html

Select2源码： https://github.com/select2/select2

bootstrap multiselect两大组件的更多相关文章

第二百三十八节，Bootstrap输入框和导航组件
Bootstrap输入框和导航组件学习要点: 1.输入框组件 2.导航组件 3.导航条组件本节课我们主要学习一下Bootstrap的两个个组件功能:输入框组件和导航导航条组件. 一．输入框组件文 ...
JS组件系列——两种bootstrap multiselect组件大比拼
前言:今天继续来看看bootstrap的另一个组件:multiselect.记得在项目开始之前,博主项目组几个同事就使用哪些js组件展开过讨论,其中就说到了select组件,由于项目的整体风格使用的b ...
web 前端常用组件【03】Bootstrap Multiselect
实际的项目网站中或多或少的或用到多选框,我选用的一款是 Bootstrap Multiselect. 官方文档:http://www.kuitao8.com/demo/20140224/1/boots ...
Bootstrap 中的 Typeahead 组件 -- AutoComplete
Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便.这里我们将介绍一下这个组件的使用. 第一,简单使用首先,最简单 ...
Java轻量级业务层框架Spring两大核心IOC和AOP原理
IoC(Inversion of Control): IOC的基本概念是:不创建对象,但是描述创建它们的方式.在代码中不直接与对象和服务连接,但在配置文件中描述哪一个组件需要哪一项服务.容器负责将这些 ...
bootstrap学习之二-组件
一.bootstrap字体图标以span的形式出现,通常可以用于一个button或者其他元素的内文本, <span class="glyphicon glyphicon-sort-b ...
Bootstrap中的 Typeahead 组件
Bootstrap 中的 Typeahead 组件其实就是嵌入到其中的typeahead.js插件,可以完成输入框的自动匹配功能,在通过一些人工的调整基本可以胜任所有的匹配功能和场景,下面介绍下简单的 ...
Flask框架简介，常用扩展包及两大核心
Flask诞生于2010年,是Armin ronacher(人名)用 Python 语言基于 Werkzeug 工具箱编写的轻量级Web开发框架. Flask 本身相当于一个内核,其他几乎所有的功能都 ...
通过微信Android和iOS版，看两大系统的差异
由于设计师或者产品经理使用的移动设备大部分是iPhone,所以在做设计时,容易忽略Android和iOS的差异,按照自己的使用习惯进行设计,导致大部分设计师或产品经理做出的设计都是基于iOS规范或习惯 ...

随机推荐

hibernate基本类型映射
model包: Book.java: package model; import java.sql.Blob;import java.util.Date; public class Book { ...
烂泥：LVM学习之逻辑卷及卷组缩小空间
本文由秀依林枫提供友情赞助,首发于烂泥行天下. 上一篇文章,我们学习了如何给LVM的逻辑卷及卷组扩容.这篇文章我们来学习,如何给LVM的逻辑卷及卷组缩小空间. 注意逻辑卷的缩小一定要离线操作,不能是在 ...
[转]angularjs 设置全局变量的3种方法
本文转自:http://blog.51yip.com/jsjquery/1601.html angularjs自身有二种,设置全局变量的方法,在加上js的设置全局变量的方法,总共有三种.要实现的功能是 ...
CentOS 7 安装Redis 2.8.7
1.下载软件: wget wget http://download.redis.io/releases/redis-2.8.7.tar.gz 2.解压软件并编译安装: tar -zxvf redis- ...
JVM 类加载过程
类从加载到虚拟机到卸载,它的整个生命周期包括:加载(Loading),验证(Validation),准备(Preparation),解析(Resolution),初始化(Initialization) ...
测试思考[持续更新ing]
1.如何设计好的测试用例,提高测试覆盖率?提高测试效率? 2.如何展现测试成果? 3.如何编写专业化.优质的测试文档? 4.如何适时借助测试工具,测试一些重复性比较高的测试? 5.如何引入自动化测试? ...
关于CSS中的字体尺寸设置 em rem等
常用单位在CSS中可以用很多不同的方式来设定字体的尺寸.一般来说,这些单位被分成两大类:绝对单位(absolute)和相对单位(relative). 绝对单位在大多数情况下是相对于某些实际量度而言的 ...
iscroll.js的使用
入门 Scroll是一个类,每个需要使用滚动功能的区域均要进行初始化.每个页面上的iScroll实例数目在设备的CPU和内存能承受的范围内是没有限制的. 尽可能保持DOM结构的简洁.iScroll使用 ...
2014 UESTC 暑前集训队内赛(1) 解题报告
A.Planting Trees 排序+模拟常识问题,将耗时排一个序,时间长的先种,每次判断更新最后一天的时间. 代码: #include <iostream> #include < ...
leetcode: Path Sum II 迭代法
Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the given su ...

bootstrap multiselect两大组件

isOpen

placeholder

selectAll

selectAllText

multiple

multipleWidth

single

position

filter

width

maxHeight

onOpen

onClose

onCheckAll

onUncheckAll

onOptgroupClick

onClick

getSelects

setSelects

enable

disable

checkAll

uncheckAll

refresh

一、组件说明以及API说明

bootstrap multiselect两大组件的更多相关文章

随机推荐

热门专题