實(shí)際的項(xiàng)目網(wǎng)站中或多或少的或用到多選框，我選用的一款是 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è)面放置了單選框或者多選框,畫面太慘了。

    動(dòng)態(tài)生成 多選框/單選框 方式我接觸的寫法有兩種，具體好壞，效率問題，仁者見仁智者見智。

    程序設(shè)計(jì)方式多種多樣，看客老爺肯定知道比我這樣寫更好的，不多說了，上代碼。

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ù)訪問接口，里面定義各種各樣對(duì)操作 product 的方法（增，刪，改，查....）,然后由另外一個(gè)類實(shí)現(xiàn)這些接口的方法(貌似扯遠(yuǎn)了，等有時(shí)間在說吧)；

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è)萬能的 object,將后臺(tá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)容過大，需要進(jìn)行轉(zhuǎn)碼，code 在代碼表中是唯一的，還有安全性較高；

 e.后臺(tái)具體的解析方法如下,我項(xiàng)目中具體是進(jìn)行查詢，所以拼接為一個(gè) sql 子句，解析后當(dāng)然也可以用來更新數(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+=")";
        }

總結(jié)

以上所述是小編給大家介紹的Bootstrap Multiselect 常用組件實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論