BootStrap 下拉框插件

PHPz

發布： 2018-10-17 16:13:08

原創

2639 人瀏覽過

Bootstrap FileInput外掛功能如此強大，完全沒有理由不去使用，但是國內很少能找到本插件完整的使用方法，於是本人去其官網翻譯了一下英文說明文檔放在這裡供英文不好的同學勉強查閱

最近公司的一個新專案剛好要用BootStrap，研究了一下發現很多插件都沒有，於是在網上找啊找，就找到了一個列表插件，無奈之下決定自己開發，於是我就從

最簡單的下拉插件開始，經過兩天業餘時間的奮鬥終於完成了。功能齊全，能滿足大部分需求，還支援模糊匹配，廢話不多說了，接下來講下這個插件的用法。

如果有用過easyui 或 ext 你會發現其實他們的用法很像的，設定項參數也基本上相同。

1.依賴檔案引入

其實整個外掛就用了bootstrap的form-control樣式，很多樣式都只是空的，預留，比較簡短的樣式都直接放在元素上了，如果您不想跟bootstrap一起使用，

可以自己去定義樣式，只要在源碼中把form-control換成你自己定義的樣式就可以，見下圖（那個bootstrap-select,目前是空的，預留使用，可以去掉）

BootStrap 下拉框插件

需要引入的檔案 jquery.min.js、bootstrap.min.css、bootstrap.min.js還有一個就是該插件。

下載網址：http://download.csdn.net/detail/lzxadsl/9164287 點選開啟連結

到時如果下拉方塊那個倒三角小圖示沒載入成功，見下圖看你圖片位置是否對，新版已經不使用圖片了，最底下有下載地址。

BootStrap 下拉框插件

2.建立下拉方塊

HTML標籤可以是input也可以是select，平常我都比較習慣用input

BootStrap 下拉框插件

JS建立方法

$(&#39;#order_status1&#39;).bootstrapSelect({
	url:&#39;user/getUser.htm&#39;,
	//data:[{user_id:1,username:&#39;lzx&#39;},{user_id:2,username:&#39;lsl&#39;}],
	valueField:&#39;user_id&#39;,
	textField:&#39;username&#39;,
	emptyText:&#39;&#39;,
	enabled:true,
	//multiple:true,开启多选
	formatter:function(rec){
		rec[&#39;username&#39;] = rec.username+&#39;_&#39;;//格式化选择项
		return rec;
	},
	unSelect:function(val,rec){
		console.log($(&#39;#order_status1&#39;).bootstrapSelect(&#39;getValue&#39;));
	},
	onSelect:function(val,rec){
		console.log(&#39;comb2:&#39;+$(&#39;#order_status2&#39;).bootstrapSelect(&#39;getValue&#39;));//获取选中值
		console.log($(&#39;#order_status1&#39;).bootstrapSelect(&#39;getValue&#39;));
		$(&#39;#order_status2&#39;).bootstrapSelect(&#39;setValue&#39;,&#39;2&#39;);
	},
	onBeforeLoad:function(params){
		params[&#39;username&#39;] = &#39;lzx&#39;;//加载前改变参数username的值
	}
});

登入後複製

下拉項目載入優先權，url > data > option option節點是使用select標籤時的下拉項option

3.插件參數說明

3.1配置項目

可依自己的需求配置對應的參數。

	 /**
	 * 定义默认配置信息
	 * data：格式{data:[{title:null,result:{}},{title:null,result:{}}]}
	 * url和data参数只有一个生效，url优先
	 * 如果有option选项，则它的优先级低于data
	 */
	$.fn.bootstrapSelect.defaults = {
			url    : null, //请求路径
			params : {},   //请求参数
			paramsType : &#39;&#39;,//参数默认是以表单形势传递，为json时是以json格式传递到后台
			data   : [],   //数据[{key:value},{key:value}]
	        method : &#39;get&#39;,//请求方法
	        textField  : &#39;text&#39;,//显示文本字段
	        valueField : &#39;id&#39;,//隐藏文本字段
	        relationId : null,//级联id
	        emptyText  : null,//空选项文本，该属性为null或undefined时不创建空选项，默认不创建
	        emptyValue : &#39;&#39;,//空选项值
	        separator  : &#39;,&#39;,//多选时返回值的分割符
	        editable	 : true,//是否可编辑
	        multiple : false,//多选
	        disabled : false,//禁用
	        downBorder : false,//下拉按钮是否带边框
	        cls:&#39;&#39;,//自定义样式,多个样式用逗号隔开 class1,class2
	        formatter:function(rec){},//格式化节点	
	        onSelect : function(val,rec){},
	        unSelect : function(val,rec){},//反选
	        onBeforeLoad: function(param){},//param 请求参数
			onLoadSuccess: function(data){},//data加载成功后返回的数据
			onLoadError: function(){}
	};

登入後複製

3.2方法說明：

//获取下拉框选中值
		$(&#39;#order_status1&#39;).bootstrapSelect(&#39;getValue&#39;)
		
		//获取下拉框选中文本
		$(&#39;#order_status1&#39;).bootstrapSelect(&#39;getText&#39;)
		
		//设置选中，如果是多选 value 格式：2，3，4
		$(&#39;#order_status1&#39;).bootstrapSelect(&#39;setValue&#39;,&#39;1&#39;);
		$(&#39;#order_status1&#39;).bootstrapSelect(&#39;setValue&#39;,&#39;1,2,3&#39;);多选时设置选中
		
		//获取所有下拉节点的数据集，返回值是数组类型
		$(&#39;#order_status1&#39;).bootstrapSelect(&#39;getData&#39;);
		 
		//重新加载，可重定向url和params
		$(&#39;#order_status1&#39;).bootstrapSelect(&#39;reload&#39;);
		//带参数
		$(&#39;#order_status1&#39;).bootstrapSelect(&#39;reload&#39;,{
			params:{id:&#39;lzx&#39;}
		});
		//重置url
		$(&#39;#order_status1&#39;).bootstrapSelect(&#39;reload&#39;,{
			url:&#39;test/test.htm&#39;,
			params:{id:&#39;lzx&#39;}
		});
		
		
		//刷新
		$(&#39;#order_status1&#39;).bootstrapSelect(&#39;refresh&#39;);
		//清空下拉节点
		$(&#39;#order_status1&#39;).bootstrapSelect(&#39;clear&#39;);
		//隐藏下拉框 
		$(&#39;#order_status1&#39;).bootstrapSelect(&#39;hide&#39;);
		// 显示下拉框
		$(&#39;#order_status1&#39;).bootstrapSelect(&#39;show&#39;);
		//根据id获取文本值 
		$(&#39;#order_status1&#39;).bootstrapSelect(&#39;getTextForVal&#39;,2);
		//销毁
		$(&#39;#order_status1&#39;).bootstrapSelect(&#39;destroy&#39;);

登入後複製

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">默认下拉框如下图：</span>

登入後複製

BootStrap 下拉框插件

#設定downBorder:true，樣式變成下圖所示

BootStrap 下拉框插件

#相關推薦：

Bootstrap教學

JS檔案上傳神器bootstrap fileinput詳解

BootStrap Validator在JS中操作校驗功能

################################################################## ######################

以上是BootStrap 下拉框插件的詳細內容。更多資訊請關注PHP中文網其他相關文章！