91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Bootstrap Multiselect常用組件有哪些

發布時間:2021-08-02 10:20:49 來源:億速云 閱讀:160 作者:小新 欄目:web開發

小編給大家分享一下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+=")";
        }

以上是“Bootstrap Multiselect常用組件有哪些”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

开鲁县| 宁津县| 东乌珠穆沁旗| 连城县| 区。| 南丹县| 全南县| 石狮市| 深州市| 安宁市| 张家界市| 内江市| 吉安县| 右玉县| 平远县| 高平市| 商河县| 祥云县| 阿鲁科尔沁旗| 精河县| 齐河县| 乡城县| 达日县| 清河县| 铁岭县| 张家口市| 武邑县| 于都县| 鹿邑县| 比如县| 榕江县| 新郑市| 五大连池市| 延寿县| 萨迦县| 丰城市| 石林| 新兴县| 青龙| 日照市| 八宿县|