Persaingan antara dua komponen utama bootstrap multiselect dalam kemahiran component_javascript JS

Gaya umum dan fungsi kedua-dua komponen ini pada asasnya adalah sama.

1. Penerangan komponen dan API
1. Komponen pertama - berbilang-pilih. Komponen ini mempunyai gaya yang ringkas, dokumentasi lengkap dan fungsi yang berkuasa. Tetapi saya merasakan bahawa kesan yang dipilih tidak begitu baik. Kami akan meninggalkan paparan kesannya.

2. Komponen kedua-bootstrap-multiselect. Gaya komponen ini sangat serupa dengan yang pertama, dan dokumentasinya agak komprehensif.

2. Komponen berbilang pilihan
1. Penerangan Komponen
Komponen ini memerlukan sokongan penyemak imbas berikut:

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

Nasib baik, kebanyakan penyemak imbas arus perdana boleh menyokongnya.

2. Pratonton kesan
(1) MultiSelect Asal

(2) Pilihan Berbilang Dimulakan

(3) Tetapkan dipilih dan lumpuhkan

(4) Tetapkan kumpulan

(5) Tetapkan nilai awal yang tidak dipilih: Sila pilih

(6) Dimulakan kepada pemilihan radio

(7) Tetapkan fungsi penapisan komponen

3. Contoh kod
Memandangkan ia adalah komponen bootstrap, ia pasti memerlukan sokongan bootstrap. Mari kita lihat js yang perlu dipetik

 @*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) Permulaan asal

<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) Tetapkan dipilih dan lumpuhkan

<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) Tetapkan pengumpulan dan nilai awal

<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) Pilihan tunggal

<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) Penapis

<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) Jika berbilang pilihan anda tidak mahu nilai awal lalai, anda boleh menetapkan nilainya semasa pemulaan. Berikut ialah senarai parameter lalai dalam kod sumber.

3. Komponen berbilang pilih Bootstrap
1. Contoh kod
Proses permulaan adalah sama seperti di atas, mula-mula rujuk fail.

<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) Permulaan paling primitif

 <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) Tetapkan dipilih dan lumpuhkan

<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) Pengelompokan

<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
 });
});

Les codes des autres effets ne seront pas affichés un par un. Le code est très simple et il n'y a fondamentalement aucun problème si vous regardez la documentation.

Ce qui précède est l'affichage des effets des deux composants à sélection multiple et des exemples de code simples. Quant à savoir lequel est le meilleur, tout dépend de votre propre sentiment. Ils sont assez simples à utiliser et ont des fonctions fondamentalement similaires. J'espère que cet article sera utile à l'apprentissage de chacun.