您好,登錄后才能下訂單哦!
小編給大家分享一下Bootstrap Multiselect常用組件有哪些,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
官方文檔:http://www.kuitao8.com/demo/20140224/1/bootstrap-multiselect-master/index.html
如果你英文好一點(diǎn),里面有詳細(xì)的介紹,多選框的設(shè)置,多選框獲取值/文本,選項(xiàng)分組,各種各樣豐富的表現(xiàn)方式和獲取。
結(jié)合實(shí)際項(xiàng)目,加深技術(shù)理解,同時(shí)也方便自己后續(xù)項(xiàng)目中的使用。
多選框和單選框相同,實(shí)際項(xiàng)目中前端不可能將里面的選項(xiàng)很直白的寫在展示層面,或多都是取自數(shù)據(jù)庫(kù)中的代碼表。
這樣耦合低,便于維護(hù);當(dāng)需要展示的選項(xiàng)發(fā)生變化的時(shí)候,只需要變更一遍數(shù)據(jù)庫(kù)就好,不需要每個(gè)頁(yè)面修改,假如有100個(gè)頁(yè)面放置了單選框或者多選框,畫(huà)面太慘了。
動(dòng)態(tài)生成 多選框/單選框 方式我接觸的寫法有兩種,具體好壞,效率問(wèn)題,仁者見(jiàn)仁智者見(jiàn)智。
程序設(shè)計(jì)方式多種多樣,看客老爺肯定知道比我這樣寫更好的,不多說(shuō)了,上代碼。
1.JavaBean 方式,在JSP 頁(yè)面,嵌入java 代碼實(shí)現(xiàn)
<div class="input-append"> <span class="add-on">bootstrapMultiselect</span><select class="multiselect" multiple="multiple"> <% for(int i=0;i<list.size();i++){ Product product = list.get(i);%> <option value='<%=product.getId() %>'><%=product.getName() %></option> <% } %> </select> </div>
a.product 定義的基本的屬性和 setter 和 getter 是一個(gè)純粹的 pojo 對(duì)象;
b.具體的 product 對(duì)象的讀取,涉及與數(shù)據(jù)交互,封裝方法的數(shù)據(jù)結(jié)構(gòu)可以使用很多(包括數(shù)組、map、list),我這里使用的是 ArrayList<Product>;
c.如果想實(shí)現(xiàn)的更合理一點(diǎn),可以定義數(shù)據(jù)庫(kù)訪問(wèn)接口,里面定義各種各樣對(duì)操作 product 的方法(增,刪,改,查....),然后由另外一個(gè)類實(shí)現(xiàn)這些接口的方法(貌似扯遠(yuǎn)了,等有時(shí)間在說(shuō)吧);
2.后臺(tái)數(shù)據(jù)庫(kù)交互,前臺(tái) JavaScript 動(dòng)態(tài)添加選項(xiàng)
依賴的具體的 WebMVC 框架為 SpringMvc.
前臺(tái) ajax 請(qǐng)求以及動(dòng)態(tài)生成選項(xiàng):
$.ajax({ url : "/" + window.location.pathname.split("/")[1] + '/service/product/init', type : 'POST', dataType : 'json', success : function(data) { if (data.success) { /** * Bootstrap Multiselect 動(dòng)態(tài)賦值選項(xiàng)卡 1 */ var products = data.products; $.each(products, function(index, product) { $("#product").append('<option value="' + product.id + '">' + product.name + '</option>'); }); /** * Bootstrap Multiselect 動(dòng)態(tài)賦值選項(xiàng)卡 2 */ var products = data.products; var newProducts = new Array(); var obj = new Object(); $.each(products, function(index, product) { obj = { label : product.id, value : product.name }; newProducts.push(obj); }); $(".multiselect").multiselect('dataprovider', newProducts); } } });
a. 第一種方法去賦值時(shí)需要注意的時(shí),多選框要在前面先初始化;
b. 然后在官方文檔的幫助下,找到了第二種方法,需要用到一個(gè) Array,還有一個(gè)萬(wàn)能的 object,將后臺(tái)返回回來(lái)的數(shù)據(jù)封裝給object ,然后將object 放入 Array中,最后賦值給多選框;
c. 后臺(tái)交互需要一個(gè)簡(jiǎn)單的 sql ,SpringMvc 會(huì)將返回回去的 map,轉(zhuǎn)換為 javascript Object 對(duì)象, list 轉(zhuǎn)換為 Array 對(duì)象;
d.多選框提交到后臺(tái)值,你可以選擇提交選項(xiàng)文本,選項(xiàng)對(duì)應(yīng)的值,提交選項(xiàng) code 有優(yōu)勢(shì),具體為code 一般為數(shù)字或者字母,而文本一般是漢字,會(huì)導(dǎo)致post 到后臺(tái)的內(nèi)容過(guò)大,需要進(jìn)行轉(zhuǎn)碼,code 在代碼表中是唯一的,還有安全性較高;
e.后臺(tái)具體的解析方法如下,我項(xiàng)目中具體是進(jìn)行查詢,所以拼接為一個(gè) sql 子句,解析后當(dāng)然也可以用來(lái)更新數(shù)據(jù)庫(kù);
if(!cxxxjo.getString("product").equals("null") && cxxxjo.getString("product").length() > 0){ JSONArray productja = JSONArray.fromObject(cxxxjo.getString("product")); wherestr += " and t.product in("; for(int i = 0;i < productja.size();i++){ if(i == productja.size()-1){ wherestr += "'" + productja.get(i).toString()+"'"; }else{ wherestr += "'" + productja.get(i).toString()+"',"; } } wherestr+=")"; }
以上是“Bootstrap Multiselect常用組件有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。