2. 程式人生 > >JS元件系列——兩種bootstrap multiselect元件大比拼[轉載]

JS元件系列——兩種bootstrap multiselect元件大比拼[轉載]

阿新 • • 發佈：2018-12-11

轉載原文地址：https://www.cnblogs.com/landeanfen/p/5013452.html

前言：今天繼續來看看bootstrap的另一個元件：multiselect。記得在專案開始之前，博主專案組幾個同事就使用哪些js元件展開過討論，其中就說到了select元件，由於專案的整體風格使用的bootstrap風格，所以在選用select元件的時候優先考慮和bootstrap結合使用的。其中就找到了兩個這種元件，大體樣式和功能基本相同，經過一番討論，專案組決定使用davidstutz的bootstrap-multiselect 元件，今天就來看看這兩個元件的用法。

一、元件說明以及API

  • 1、第一個元件是寫bootstrap table的主人公wenzhixin封裝的一個元件——multiple-select。這個元件風格簡單、文件全、功能強大。但是覺得它選中的效果不太好。關於它的效果展示，我們放在後面。還是給出對應的文件API。

Multiple-Select原始碼主頁：https://github.com/wenzhixin/multiple-select

Multiple-Select文件以及Demo：http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN

  • 2、第二個元件也是在github上面找的——
    bootstrap-multiselect    。這個元件風格和第一個非常相似，文件也挺全面。

bootstrap-multiselect原始碼主頁：https://github.com/davidstutz/bootstrap-multiselect

bootstrap-multiselect文件以及Demo：http://davidstutz.github.io/bootstrap-multiselect/

二、Multiple-select元件

1、元件說明

這個元件需要的瀏覽器支援如下：

  • IE 7+
  • Chrome 8+
  • Firefox 10+
  • Safari 3+
  • Opera 10.6+

還好，一般主流的瀏覽器都能夠支援。

2、效果預覽

 * （1）原始的MultiSelect

原始的MultiSelect

  • （2）初始化的Multiple Select

初始化的

初始化的-選擇樣式

初始化的-全選

  • （3）設定選中和禁用

設定選中和禁用

  • （4）設定分組

設定分組

  • （5）設定未選中的初始值：請選擇

設定未選中的初始值

  • （6）初始化成單選

初始化成單選

  • （7）設定元件的篩選功能

設定元件的篩選功能-樣式

設定元件的篩選功能-搜尋效果

3、程式碼示例

既然是bootstrap的元件，肯定需要bootstrap的支援。我們來看看需要引用的js

@*Jquery*@
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>

    @*bootstrap*@
    <script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
    <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    @*multiple-select*@
    <script src="~/Content/multiselect_wenzhixin/multiple-select-master/multiple-select.js"></script>
    <link href="~/Content/multiselect_wenzhixin/multiple-select-master/multiple-select.css" rel="stylesheet" />

    @*頁面js*@
    <script src="~/Scripts/Home/Index_wenzhixin.js"></script>
  • （1）原始的初始化
<label class="control-label col-xs-1" for="sel_search_orderstatus">多選站點</label>
<div class="col-xs-2" style="margin-top:7px;">
     <select id="sel_search_orderstatus" style="width:150px" multiple="multiple">
       <option value="0">未排產</option>
        <option value="5">已排產</option>
        <option value="10">已鎖定</option>
        <option value="25">在制</option>
        <option value="20">訂單提交</option>
        <option value="30">訂單刪除</option>
         <option value="50">訂單報廢</option>
      </select>
</div>
$(function () {
    $('#sel_search_orderstatus').multipleSelect();
})
  • （2）設定選中和禁用
<label class="control-label col-xs-1" for="sel_search_orderstatus2">disabled Select</label>
<div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus2" style="width:150px" multiple="multiple">
           ......
     </select>
  </div>
$(function () {
    $('#sel_search_orderstatus2').multipleSelect();
})
  • （3）設定分組和初始值
<label class="control-label col-xs-1" for="sel_search_orderstatus3">分組</label>
<div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus3" style="width:150px" multiple="multiple">
        <optgroup label="未上線">
            <option value="0">未排產</option>
        </optgroup>
        <optgroup label="已上線">
            <option value="5">已排產</option>
            <option value="10">已鎖定</option>
            <option value="25">在制</option>
            <option value="20">訂單提交</option>
        </optgroup>
        <optgroup label="異常">
            <option value="30">訂單刪除</option>
            <option value="50">訂單報廢</option>
        </optgroup>
    </select>
</div>
$(function () {
    $('#sel_search_orderstatus3').multipleSelect({
        placeholder: "請選擇"
    });
})
  • （4）單選
<label class="control-label col-xs-1" for="sel_search_orderstatus4">單選</label>
<div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus4" style="width:150px" multiple="multiple">
        .......
    </select>
</div>
$(function () {
    $('#sel_search_orderstatus4').multipleSelect({
        placeholder: "請選擇",
        single: true
    });
})
  • （5）篩選
<label class="control-label col-xs-1" for="sel_search_orderstatus5">篩選</label>
<div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus5" style="width:150px" multiple="multiple">
        ......
    </select>
</div>
$(function () {
    $('#sel_search_orderstatus5').multipleSelect({
        placeholder: "請選擇",
        filter: true
    });
})

6）更多引數：如果園友們有興趣，可以看看原始碼裡面的所有引數，雖然沒有中文詳解，但是根據英文的大概意思就能知道是幹什麼用的，如果你的multiple select不想要預設的初始值，可以在初始化的時候去設定他們的值。如下是原始碼裡面的預設引數列表。

image

下面是博主從文件裡面截選出來的一些自認為比較重要的引數說明：（轉載至文件http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN）

  • #### isOpen

型別: boolean

是否開啟下拉列表。

預設值為 false。

  • #### placeholder

型別: string

顯示預設的提示資訊。

預設值為 ''。

  • #### selectAll

型別: boolean

是否顯示全選複選框。

預設值為 true。

  • #### selectAllText

型別: string

全選複選框的顯示內容。

預設值為 Select all。

  • #### multiple

型別: boolean

是否在一行中顯示多個選項。

預設值為 false。

  • #### multipleWidth

型別: integer

一行中每個選項的寬度。

預設值為 80。

  • #### single

型別: boolean

是否只允許你選擇一行。

預設值為 false。

  • #### position

型別: string

定義下拉列表的位置，只能是 bottom 或者 top。

預設值為 bottom.

  • #### filter

型別: boolean

是否開啟過濾功能。

預設值為 false。

  • #### width

型別: integer

定義下拉列表的寬度。

預設值為 undefined。 預設與 select 的寬度相同。

  • #### maxHeight

型別: integer

下拉列表的最大高度。

預設值為 250。

（7）常用事件（轉載至文件http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN）

  • #### onOpen

當下拉列表被開啟時觸發。

  • #### onClose

當下拉列表被關閉時觸發。

  • #### onCheckAll

點選全選或者呼叫 “checkall” 方法時觸發。

  • #### onUncheckAll

點選全不選或者呼叫 “uncheckall” 方法時觸發。

  • #### onOptgroupClick

點選分組時觸發。

  • #### onClick

點選一個複選框時觸發

（8）常用方法（轉載至文件http://wenzhixin.net.cn/p/multiple-select/docs/index.html?locale=zh_CN）

  • #### getSelects

獲取 Multiple Select 選擇內容。

引數: type

型別: string

選擇內容的型別，value 或者 text。

預設值為 value。

  • #### setSelects

設定 Multiple Select 的內容。

引數: values

型別: array

選擇框的內容資訊。

  • #### enable

啟用 Multiple Select。

  • #### disable

禁用 Multiple Select。在這種模式下，不允許使用者操作。

  • #### checkAll

全選所有的複選框。

$('select').multipleSelect('checkAll');
  • #### uncheckAll

全不選所有的複選框。

$('select').multipleSelect('uncheckAll');
  • #### refresh

重新載入 Multiple Select。

假如你是通過 AJAX 或者 DOM 來手動新增或者刪除 option 選項，可以通過 refresh 方法來重新載入 Multiple Select。

三、Bootstrap-multiselect元件

1、效果預覽

  • （1）最原始的樣子

     image

image

image

  • （2）單選

image

  • （3）預設選中和禁用

image

  • （4）分組摺疊和展開

image

image

  • （5）初始化控制元件選中和未選中的值

image

image

  • （6）搜尋過濾功能

image

image

2、程式碼示例

初始化的過程和上面的類似，首先引用檔案。

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

<script src="~/Content/multiselect_davidstutz/js/bootstrap-multiselect.js"></script>
<link href="~/Content/multiselect_davidstutz/css/bootstrap-multiselect.css" rel="stylesheet" />

<script src="~/Scripts/Home/Index_davidstutz.js"></script>
  • （1）最原始的初始化
<label class="control-label col-xs-1" for="sel_search_orderstatus">多選站點</label>
<div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus" style="width:150px" multiple="multiple">
        <option value="0">未排產</option>
        <option value="5">已排產</option>
        <option value="10">已鎖定</option>
        <option value="25">在制</option>
        <option value="20">訂單提交</option>
        <option value="30">訂單刪除</option>
        <option value="50">訂單報廢</option>
    </select>
</div>
$(function () {
    $('#sel_search_orderstatus').multiselect();
});
  • （2）設定選中和禁用
<label class="control-label col-xs-1" for="sel_search_orderstatus2">disabled Select</label>
<div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus2" style="width:150px" multiple="multiple">
        <option value="0">未排產</option>
        <option value="5" selected="selected">已排產</option>
        <option value="10" selected="selected">已鎖定</option>
        <option value="25" disabled="disabled">在制</option>
        <option value="20" disabled="disabled">訂單提交</option>
        <option value="30" disabled="disabled" selected="selected">訂單刪除</option>
        <option value="50">訂單報廢</option>
    </select>
</div>
  • （3）分組
<label class="control-label col-xs-1" for="sel_search_orderstatus3">分組</label>
<div class="col-xs-2" style="margin-top:7px;">
    <select id="sel_search_orderstatus3" style="width:150px" multiple="multiple">
        <optgroup label="未上線">
            <option value="0">未排產</option>
        </optgroup>
        <optgroup label="已上線">
            <option value="5">已排產</option>
            <option value="10" selected="selected">已鎖定</option>
            <option value="25" disabled="disabled">在制</option>
            <option value="20">訂單提交</option>
        </optgroup>
        <optgroup label="異常">
            <option value="30">訂單刪除</option>
            <option value="50">訂單報廢</option>
        </optgroup>
    </select>
</div>
$(function () {
    $('#sel_search_orderstatus3').multiselect({
        enableCollapsibleOptGroups: true
    });
});

其他效果的程式碼就不一一展示了，程式碼很簡單，看看文件基本沒啥問題。

四、總結

 以上就是兩種多選元件的效果展示以及簡單的程式碼示例。至於哪種更好全憑園友們自己的感覺，使用起來都挺簡單，功能基本類似。原始碼下載

相關推薦

JS元件系列——兩種bootstrap multiselect元件大比拼[轉載]

轉載原文地址：https://www.cnblogs.com/landeanfen/p/5013452.html 前言：今天繼續來看看bootstrap的另一個元件：multiselect。記得在專案開始之前，博主專案組幾個同事就使用哪些js元件展開過討論，其中就說到了select元件，

JS元件系列——兩種bootstrap multiselect元件大比拼

前言：今天繼續來看看bootstrap的另一個元件：multiselect。記得在專案開始之前，博主專案組幾個同事就使用哪些js元件展開過討論，其中就說到了select元件，由於專案的整體風格使用的bootstrap風格，所以在選用select元件的時候優先考慮和bootstrap結合使用的。其中就找到了兩個

EXT JS兩種時間控制元件的比較

1、new Ext.form.DateField 只提供了日期選擇部分，沒有提供時間部分供選擇，例：this.beginDt =  newExt.form.DateField({        selectOnFocus: true,        allowBlank: f

Winform下使用timer控制元件的兩種方法

方法一：直接拖Timer控制元件 1、工具箱找到Timer控制元件，拖到視窗介面 2、雙擊Timer控制元件產生一個Timer事件   3、適當的位置使能timer   timer1.Enabled = true; //開啟定時器 方法二：後

SAP與金稅連線有兩種方式：元件介面及文字介面。

SAP與金稅連線有兩種方式：元件介面及文字介面。 文字介面為例： 1、SAP取發票資料，主要來自合同，銷售訂單，交貨單，發票，客戶供應商主資料等 2、SAP處理：合併，拆分，折扣等 3、匯出TXT文字 4、金稅開票機讀取文字：通過引數傳遞資料，注意1分錢誤差問題（引數傳遞導致） 5、回寫

小程式自定義元件及元件間兩種通訊方式

小程式經常會用到自定義元件，今天來說下五星評論自定義元件，可以單純顯示評分也可以進行評分，及元件間兩種通訊方式 一、在你的專案中根目錄新建components目錄，在components目錄下新建starComment目錄，然後右鍵點選新建Component，會出現如下目錄結構 二、在starComp

Javascript判斷是否有ActiveX控制元件的兩種方法

在網頁中使用ActiveX控制元件是這麼新增的 <object classid="AB-56-788889-H" id="testActiveX" width=100px> </object> 查詢資料，發現有兩種方法 一、Dom文件判斷 &l

Winform遍歷視窗的所有控制元件（兩種方式）

博文主要以下圖中的控制元件來比較這兩種方式獲取控制元件的方式： 1. 最簡單的方式： private void GetControls1(Control fatherControl) { C

JS元件系列——又一款MVVM元件：Vue（一：30分鐘搞定前端增刪改查）

正文 前言：關於Vue框架，好幾個月之前就聽說過，瞭解一項新技術之後，總是處於觀望狀態，一直在猶豫要不要系統學習下。正好最近有點空，就去官網瞭解了下，看上去還不錯的一個元件，就抽空研究了下。最近園子裡vue也確實挺火，各種入門博文眼花繚亂，博主也不敢說寫

JS元件系列——又一款MVVM元件：Vue（二：構建自己的Vue元件）

前言：轉眼距離上篇 JS元件系列——又一款MVVM元件：Vue（一：30分鐘搞定前端增刪改查） 已有好幾個月了，今天打算將它撿起來，發現好久不用，Vue相關技術點都生疏不少。經過這幾個月的時間，Vue的發展也是異常迅猛，不過這好像和博主都沒什麼太大的關係，博主還是老老實實研究自己的技術吧。技術之路還很長，且行

在react中，通過點選選中元件的兩種情況

想要通過點選元件,來進行元件選中與未選中狀態的變換，可以分為兩種情況，一種是點選哪一項該項選中，其他項不變，即為唯一選中；另一種是點選一項後，再點選其他項，會選中多項，再次點選已選中項會取消選中狀態。 下面來分別看一下在react中的兩種實現手法，基本思路都是

自定義圓形ImageView控制元件的兩種方法

這樣摘錄的目的在於，學習自定義控制元件的時候可以對比著看看同一種效果不同的寫法有什麼差異 第一種，寫在自己專案中的自定義圓形Imageview import android.content.Context; import android.graphics.Bitmap;

Java swing 中控制元件的兩種居中顯示方法

方式一： 核心程式碼： this.setLocationRelativeTo(null); 方式解讀：這段程式碼在初始化控制元件時，設定該控制元件相對其他控制元件為null，也就是不相對其他控制

C# 獲取aspx頁面中所有隱藏控制元件的兩種方法

適合.NET4.0 以上版本 /// <summary> /// 獲取ASPX頁面中隱藏post值 Viewstae 等 /// </summary> /// <param name="Url"></para

跨域問題相關知識詳解（原生js和jquery兩種方法實現jsonp跨域）

syn con 加載 developer 兩種方法 ray exe 編寫 分組 1、同源策略 同源策略（Same origin policy），它是由Netscape提出的一個著名的安全策略。同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽

input與textarea實時監控，原生JS與JQ兩種方法

之前一直在用JQ的方法對input與textarea輸入實時監控，今天在偶然下發現了原生JS的方法對input的實時監控。 廢話不多說了，直接上程式碼。 HTML程式碼： <!DOCTY

不同IE版本，引入不同的js檔案。兩種實現方式

第一種，使用ie的條件標籤： <!--[if lt IE 9]>  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![end

js陣列排序兩種寫法（冒泡）

js實現陣列的排序方法（sort方法） var arrObj = new Array (1,8,7,6); arrObj.sort(); console.log(arrObj.join(",")) 如

C#元件系列——又一款日誌元件：Elmah的學習和分享

前言：好久沒動筆了，都有點生疏，12月都要接近尾聲，可是這月連一篇的產出都沒有，不能壞了“規矩”，今天還是來寫一篇。最近個把月確實很忙，不過每天早上還是會抽空來園子裡逛逛。一如既往，園子裡每年這個時候都有大把的年終總結、回憶過去展望未來之類的文章。博主是沒時間寫總結了，要學的東西太多。關於Vue的系列一定要抽

iOS死活無法捕捉網頁js方法的兩種情況

前提： 這篇文章所說的無法捕捉（即重定向失敗）的情況，並不是指由於你的js方法寫錯了，或者重定向的方法名不對等由於程式碼錯誤引起的捕捉失敗。而是在程式碼、邏輯全部正確的情況下，還是無法捕捉不到網頁js方法。 1、網頁js有對自己的js方法進行實現時，客戶端會無法捕捉到js