web 前端常用組件【03】Bootstrap Multiselect

    實際的項目網站中或多或少的或用到多選框，我選用的一款是 Bootstrap Multiselect。

    官方文檔：http://www.kuitao8.com/demo/20140224/1/bootstrap-multiselect-master/index.html

    如果你英文好一點，里面有詳細的介紹，多選框的設置，多選框獲取值/文本，選項分組，各種各樣豐富的表現方式和獲取。

 

    結合實際項目，加深技術理解，同時也方便自己后續項目中的使用。

    多選框和單選框相同，實際項目中前端不可能將里面的選項很直白的寫在展示層面，或多都是取自數據庫中的代碼表。

    這樣耦合低，便於維護；當需要展示的選項發生變化的時候，只需要變更一遍數據庫就好，不需要每個頁面修改，假如有100個頁面放置了單選框或者多選框,畫面太慘了。

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

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

1.JavaBean 方式，在JSP 頁面，嵌入java 代碼實現

               <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 是一個純粹的 pojo 對象；

b.具體的 product 對象的讀取，涉及與數據交互，封裝方法的數據結構可以使用很多（包括數組、map、list），我這里使用的是 ArrayList<Product>;

c.如果想實現的更合理一點，可以定義數據庫訪問接口，里面定義各種各樣對操作 product 的方法（增，刪，改，查....）,然后由另外一個類實現這些接口的方法(貌似扯遠了，等有時間在說吧)；

2.后台數據庫交互，前台 JavaScript 動態添加選項

  依賴的具體的 WebMVC 框架為 SpringMvc.

  前台 ajax 請求以及動態生成選項：

  $.ajax({
      url : "/" + window.location.pathname.split("/")[1] + '/service/product/init',
      type : 'POST',
      dataType : 'json',
      success : function(data) {
          if (data.success) {
              /**
               * Bootstrap Multiselect 動態賦值選項卡 1 
               */
              var products = data.products;
              $.each(products, function(index, product) {                
                  $("#product").append('<option value="' + product.id + '">' + product.name + '</option>');
              });
               
              /**
               * Bootstrap Multiselect 動態賦值選項卡 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. 第一種方法去賦值時需要注意的時，多選框要在前面先初始化；

 b. 然后在官方文檔的幫助下，找到了第二種方法，需要用到一個 Array,還有一個萬能的 object,將后台返回回來的數據封裝給object ,然后將object 放入 Array中，最后賦值給多選框；

 c. 后台交互需要一個簡單的 sql ，SpringMvc 會將返回回去的 map,轉換為 javascript Object 對象， list 轉換為 Array 對象；

 d.多選框提交到后台值，你可以選擇提交選項文本，選項對應的值，提交選項 code 有優勢，具體為code 一般為數字或者字母，而文本一般是漢字，會導致post 到后台的內容過大，需要進行轉碼，code 在代碼表中是唯一的，還有安全性較高；

 e.后台具體的解析方法如下,我項目中具體是進行查詢，所以拼接為一個 sql 子句，解析后當然也可以用來更新數據庫；

                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+=")";
                }