JS组件系列——两种bootstrapmultilect组件⼤⽐拼
前⾔:今天继续来看看bootstrap的另⼀个组件:multilect。记得在项⽬开始之前,博主项⽬组⼏个同事就使⽤哪些js组件展开过讨论,其中就说到了lect组件,由于项⽬的整体风格使⽤的bootstrap风格,所以在选⽤lect组件的时候优先考虑和bootstrap结合使⽤的。其中就找到了两个这种组件,⼤体样式和功能基本相同,经过⼀番讨论,项⽬组决定使⽤的bootstrap-multilect 组件,今天就来看看这两个组件的⽤法。
⼀、组件说明以及API
1、第⼀个组件是写bootstrap table的主⼈公封装的⼀个组件——。这个组件风格简单、⽂档全、功能强⼤。但是觉得它选中的效果不太好。关于它的效果展⽰,我们放在后⾯。还是给出对应的⽂档API。
2、第⼆个组件也是在github上⾯找的——。这个组件风格和第⼀个⾮常相似,⽂档也挺全⾯。
⼆、Multiple-lect组件
1、组件说明
这个组件需要的浏览器⽀持如下:
IE 7+
Chrome 8+
Firefox 10+
Safari 3+缥缈的读音
Opera 10.6+
还好,⼀般主流的浏览器都能够⽀持。
2、效果预览
(1)原始的MultiSelect
(2)初始化的Multiple Select
(3)设置选中和禁⽤
(4)设置分组
(5)设置未选中的初始值:请选择南山古寺
(6)初始化成单选
(7)设置组件的筛选功能
3、代码⽰例
既然是bootstrap的组件,肯定需要bootstrap的⽀持。我们来看看需要引⽤的js
@*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-lect*@
<script src="~/Content/multilect_wenzhixin/multiple-lect-master/multiple-lect.js"></script>
<link href="~/Content/multilect_wenzhixin/multiple-lect-master/multiple-lect.css" rel="stylesheet"/>
@*页⾯js*@
<script src="~/Scripts/Home/Index_wenzhixin.js"></script>
(1)原始的初始化
一场秋雨 <label class="control-label col-xs-1" for="l_arch_orderstatus">多选站点</label> <div class="col-xs-2" >
<lect id="l_arch_orderstatus" 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>
缺一不可</lect>
</div>
$(function () {
$('#l_arch_orderstatus').multipleSelect();
})
(2)设置选中和禁⽤
<label class="control-label col-xs-1" for="l_arch_orderstatus2">disabled Select</label> <div class="col-xs-2" >
<lect id="l_arch_orderstatus2" multiple="multiple">
......
</lect>
</div>
$(function () {
$('#l_arch_orderstatus2').multipleSelect();
})
(3)设置分组和初始值
<label class="control-label col-xs-1" for="l_arch_orderstatus3">分组</label> <div class="col-xs-2" >
<lect id="l_arch_orderstatus3" 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>
</lect>
</div>
$(function () {
$('#l_arch_orderstatus3').multipleSelect({
placeholder: "请选择"
});
})
(4)单选
<label class="control-label col-xs-1" for="l_arch_orderstatus4">单选</label> <div class="col-xs-2" >
<lect id="l_arch_orderstatus4" multiple="multiple">
.......
</lect>
</div>
$(function () {
$('#l_arch_orderstatus4').multipleSelect({
placeholder: "请选择",
single: true
});
})
(5)筛选
<label class="control-label col-xs-1" for="l_arch_orderstatus5">筛选</label>
<div class="col-xs-2" >
<lect id="l_arch_orderstatus5" multiple="multiple">
......
</lect>
</div>
$(function () {
$('#l_arch_orderstatus5').multipleSelect({
placeholder: "请选择",
filter: true
});
})
(6)更多参数:如果园友们有兴趣,可以看看源码⾥⾯的所有参数,虽然没有中⽂详解,但是根据英⽂的⼤概意思就能知道是⼲什么⽤的,如果你的multiple lect不想要默认的初始值,可以在初始化的时候去设置他们的值。如下是源码⾥⾯的默认参数列表。
isOpen
类型: boolean
是否打开下拉列表。
默认值为 fal。
placeholder
类型: string
显⽰默认的提⽰信息。
默认值为 ''。
lectAll
1972年属鼠的是什么命
类型: boolean
是否显⽰全选复选框。
默认值为 true。
lectAllText
类型: string
全选复选框的显⽰内容。
默认值为 Select all。
multiple
类型: boolean
是否在⼀⾏中显⽰多个选项。
默认值为 fal。
multipleWidth
类型: integer
⼀⾏中每个选项的宽度。
默认值为 80。
single
类型: boolean
是否只允许你选择⼀⾏。
默认值为 fal。
position
类型: string
定义下拉列表的位置,只能是 bottom 或者 top。默认值为 bottom.
filter
类型: boolean
是否开启过滤功能。
默认值为 fal。
width
类型: integer
定义下拉列表的宽度。
默认值为 undefined。默认与 lect 的宽度相同。
maxHeight
类型: integer
下拉列表的最⼤⾼度。
高一化学知识点总结
默认值为 250。
onOpen
当下拉列表被打开时触发。
onClo
当下拉列表被关闭时触发。
失眠吃什么药最好
onCheckAll
点击全选或者调⽤ “checkall” ⽅法时触发。
onUncheckAll
点击全不选或者调⽤ “uncheckall” ⽅法时触发。
onOptgroupClick
点击分组时触发。
onClick
点击⼀个复选框时触发
getSelects
获取 Multiple Select 选择内容。
参数: type
类型: string
选择内容的类型,value 或者 text。
默认值为 value。
tSelects
设置 Multiple Select 的内容。
参数: values
类型: array
选择框的内容信息。
enable
启⽤ Multiple Select。
disable
禁⽤ Multiple Select。在这种模式下,不允许⽤户操作。
老花眼的症状checkAll
全选所有的复选框。
$('lect').multipleSelect('checkAll');
uncheckAll
全不选所有的复选框。
$('lect').multipleSelect('uncheckAll');
refresh
重新加载 Multiple Select。
假如你是通过 AJAX 或者 DOM 来⼿动添加或者删除 option 选项,可以通过 refresh ⽅法来重新加载 Multiple Select。
三、Bootstrap-multilect组件
1、效果预览
(1)最原始的样⼦
(2)单选