Bootstrap-select简单应用及其集合Spring-MVC的动态生成

摘要

一个比较友好的下拉框菜单插件，基于bootstrap，本文基于原作者的test文件整理。

插件的下载地址https://github.com/silviomoreto/bootstrap-select

导入所需依赖以及汉化包：

<link rel='stylesheet' href='../css/bootstrap.min.css'/>
<link rel='stylesheet' href='../css/bootstrap-select.min.css'/>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-select.min.js"></script>
<script src="../js/select-zh_CN.min.js"></script>

第一个简单的使用：

<div class="form-group">
    <div class="col-sm-4">
        <select id="mySelect" class="selectpicker show-tick form-control">
                <option>Apple</option>
                <option>Banana</option>
                <option>Orange</option>
                <option>Pineapple</option>
                <option>Apple2</option>
                <option>Banana2</option>
                <option>Orange2</option>
                <option>Pineapple2</option>
                <option>Apple2</option>
                <option>Banana2</option>
                <option>Orange2</option>
                <option>Pineapple2</option>
        </select>
    </div>
</div>

效果： 

这是一个最原始的使用，通过使用js或者在元素上添加属性可以达到想要的结果

由于接触时间短，所需效果不多，只是罗列了很少一部分：

select中:

multiple多选

data-live-search 搜索框

data-done-button 关闭按钮

title 初始的文字

data-max-options 最大的选择数

data-size 显示数量

data-actions-box="true" 使用全选和全部取消

option中：

selected 已选择

disabled 不能选择

data-subtext 描述性文字

optgroup中：

label 分组名称

data-subtext 描述

js:

初始化：

$("#mySelect").selectpicker({
        noneSelectedText:'请选择',//未选择时的显示
        maxOptions: 2,//最大选择数
        size: 3,//显示数量
        doneButton: true, //是否显示关闭按钮
        liveSearch: true, //是否显示搜索框
});

方法：

mySelect.find('option:selected').prop('disabled', true);//解封不能选择的项
mySelect.selectpicker('refresh');//刷新

最后介绍一下关于动态加载的问题

页面：

<div class="form-group">
    <div class="col-sm-4">
        <select id="mySelect" class="selectpicker show-tick form-control" multiple data-live-search="true">
       </select>
    </div>
</div>

$(function(){
    var mySelect= $("#mySelect"); 
    mySelect.selectpicker({
        noneSelectedText:'请选择',
        maxOptions: 2,//最大选择数
        size: 3,//显示数量
        doneButton: true,//是否显示关闭按钮
    });
    $.ajax({
        type: 'post',
        url: 'tests',
        cache: false,
        dataType:'json',
        success: function (data) {
        	var msg = data.msg;
            $.each(msg,function(i){
            	$("<option value='" + msg[i].id + "'>" + msg[i].name + "</option>")
                .appendTo(mySelect);
            });
            //更新内容 下面两个语句缺一不可！！ 这里我也不清楚为何这样 全靠谷歌才得到的
            mySelect.selectpicker('render');
            mySelect.selectpicker('refresh');
        }
    });
})

后台代码：

使用了Spring-MVC  Test类再次不再给出

@RequestMapping("/tests")
	public @ResponseBody static String getTests(){
		Map<String, Object> map = new HashMap<>();
		List<Test> ts = new ArrayList<>();
		for(int i = 0; i < 7; i++){
			Test t = new Test();
			t.setId(i);
			t.setName("名字" + i * 3);
			ts.add(t);
		}
		map.put("msg" , ts);
		map.put("status", "ok");
		return JSON.toJSONString(map);
}

效果：

本人新手，如果有错误望请指出

 收藏 ( 0 )  赞 ( 2 )