angular2的select多选插件ng-multiselect-dropdown使用总结
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angular2的select多选插件ng-multiselect-dropdown使用总结相关的知识,希望对你有一定的参考价值。
参考技术A 最近项目需要用到select多选框,故找了一些插件,最终选择了ng-multiselect-dropdown插件,下面将整个过程记录下来。1 首先在项目文件中导入插件 npm i ng-multiselect-dropdown
2 插件的github地址为 https://github.com/NileshPatel17/ng-multiselect-dropdown
3 参考文档使用
4 修改默认配置
在node_modules中找到多选插件
找到下面的配置,将其修改
bootstrap-select 的多选+模糊查询下拉框详解(官方示例文档解读)
引入问题
之前博主在实际开发中遇到了一个问题,就是需要既支持多选又同时支持模糊查询的下拉控件,大家所熟知的比较强大的下拉框插件bootstrap-select2,博主当时也参考过,但是发现它的多选效果做的比较差,类似这种,
这样的多选控件必须要控件足够长,如果选择超过一定限制就会出现样式崩溃,你懂的~后面我无意中发现了bootstrap-select插件,瞬间发现它很高大上呀!它即可以支持单选,又支持多选,最厉害的是竟然还自带模糊查询功能!先给大家展示下炫酷的效果吧:
这样的控件不用真是可惜了,后面博主找了很多文档和博客参考,但是发现很多都没有写清楚具体的用法,只是简单的摆一个例子,并没有太大的参考价值,博主通过研究官网的相关文档以及结合自身开发经验,把bootstrap-select的用法做一个清晰的梳理,供大家参考。
官方插件地址: http://silviomoreto.github.io/bootstrap-select/
Github地址: https://github.com/silviomoreto/bootstrap-select
应用示例(参考官方文档Basic examples)
1.单选
- 简单单选
选中默认是没有“√”的。
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
效果展示
- 分组单选
注意加入optgroup标签
<select class="selectpicker">
<optgroup label="Picnic">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</optgroup>
<optgroup label="Camping">
<option>Tent</option>
<option>Flashlight</option>
<option>Toilet Paper</option>
</optgroup>
</select>
效果展示
2.多选框
相比于单选框加入了一个multiple
标签
<select class="selectpicker" multiple>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
效果展示
3.模糊查询
添加一个data-live-search="true"
的属性
<select class="selectpicker" data-live-search="true">
<option>Hot Dog</option>
<option>Fries</option>
<option>Soda</option>
<option>Burger</option>
<option>Shake</option>
<option>Smile</option>
</select>
效果展示
4.多选限制
添加属性data-max-options="2"
或者在初始化时用maxOptionsText
做限制
<select class="selectpicker" multiple data-max-options="2">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
或者在初始化selectpicker时设置maxOptionsText
$(‘.selectpicker‘).selectpicker({
‘selectedText‘:‘cat‘,
‘maxOptionsText‘:2;
})
效果展示
5.自定义按钮的文本
通过属性title
来控制。
- 选择框文本
<select class="selectpicker" multiple title="请选择一个">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
效果展示
- 选择显示单条文本
意思就是选中相应的option,就展示option的title,比如选中"Burger, Shake and a Smile",文本框内显示Combo 2。
<select class="selectpicker">
<option title="Combo 1">Hot Dog, Fries and a Soda</option>
<option title="Combo 2">Burger, Shake and a Smile</option>
<option title="Combo 3">Sugar, Spice and all things nice</option>
</select>
效果展示
6.多选框格式化选择文本
通过属性 data-selected-text-format
来控制选中的值的显示
可选的值有如下4个:
1.values
: 逗号分隔的选定值列表(系统默认);
2.count
: 如果选择了一个项,则显示选项值。如果选择多于一个,则显示所选项的数量,如选择2个,则下拉框显示2个已被选中;
3.count > x
: 当count的值小于x时,展示逗号分隔的选定值列表;当count>x时,显示x个被选中;
4.static
:无论选中什么,都只展示默认的选中文本。
下面给几个简单示例
<select class="selectpicker" multiple data-selected-text-format="count">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
<option>Onions</option>
</select>
效果展示
<select class="selectpicker" multiple data-selected-text-format="count>3">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
<option>Onions</option>
</select>
效果展示
7.样式选择
- 按钮样式
通过data-style
来设置按钮的样式
<select class="selectpicker" data-style="btn-primary">
...
</select>
<select class="selectpicker" data-style="btn-info">
...
</select>
<select class="selectpicker" data-style="btn-success">
...
</select>
<select class="selectpicker" data-style="btn-warning">
...
</select>
<select class="selectpicker" data-style="btn-danger">
...
</select>
效果展示
- 单选框样式
这里要注意一下,单选框默认是没有多选框的选中之后的"√"图标的,如果想要加上这个图标的话,需要在样式中加入show-tick
即可。
<select class="selectpicker show-tick">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
效果展示
- 菜单的箭头
Bootstrap的菜单箭头也可以被添加进来,需要加入样式show-menu-arrow
,个人感觉差别不大
<select class="selectpicker show-menu-arrow">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
效果展示
- style样式自定义
bootstrap-select的样式不是死的,可以自定义style样式,类似最基本的css样式添加。
.special {
font-weight: bold !important;
color: #fff !important;
background: #bc0000 !important;
text-transform: uppercase;
}
<select class="selectpicker">
<option>Mustard</option>
<option class="special">Ketchup</option>
<option style="background: #5cb85c; color: #fff;">Relish</option>
</select>
效果展示
- 宽度(Width)
1.引用bootstrap的样式
<div class="row">
<div class="col-xs-3">
<div class="form-group">
<select class="selectpicker form-control">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
</div>
</div>
2.使用data-width
属性,来定义宽度,可选的值有以下4个
auto
:select的宽度由option中内容宽度最宽的哪个决定;
fit
:select的宽度由实际选中的option的宽度决定;
100px
:select的宽度定义为100px;
50%
:select的宽度设置为父容器宽度的50%。
<select class="selectpicker" data-width="auto">
<option>cow</option>
<option>bullaaaaaaaaaaaa</option>
<option>ASD</option>
<option>Bla</option>
<option>Ble</option>
</select>
<select class="selectpicker" data-width="fit">
<option>cow</option>
<option>bullaaaaaaaaaaaa</option>
<option>ASD</option>
<option>Bla</option>
<option>Ble</option>
</select>
<select class="selectpicker" data-width="100px">
<option>cow</option>
<option>bull</option>
<option>ASD</option>
<option selected>Bla</option>
<option>Ble</option>
</select>
<select class="selectpicker" data-width="50%">
<option>cow</option>
<option>bull</option>