（10）kendo UI使用基礎介紹與問題整理——MultiSelect

很久沒有更新，實在抱歉，最近患上了懶癌，慚愧！

這篇文章直接上乾貨吧！

一、基礎簡介

官網demo：

連接地址：https://demos.telerik.com/kendo-ui/multiselect/serverfiltering

https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect

demo代碼：

<div id="example" >
    <div class="demo-section k-content">
        <h4>Products</h4>
        <select id="products"></select>
    </div>
    <script> $(document).ready(function() { $("#products").kendoMultiSelect({ placeholder: "Select products...", dataTextField: "ProductName", dataValueField: "ProductID", autoBind: false, dataSource: { type: "odata", serverFiltering: true, transport: { read: { url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products", } } }, value: [ { ProductName: "Chang", ProductID: 2 }, { ProductName: "Uncle Bob's Organic Dried Pears", ProductID: 7 } ] }); }); </script>
</div>

相信聰明的你能看懂上面的代碼。

參數簡介：

原諒我偷懶，你們參考官網的文檔自行查看吧，主要整理一下我實際遇到的小問題，有須要的看看下面的「實際小分析」吧。

二、實際小分析

（1）組件帶有默認值的問題

實際項目中，當MultiSelect須要默認值的狀況，因爲默認值是須要經過ajax請求的，因此當MultiSelect組件初始化以後，再經過

$("#multiselect").data("kendoMultiSelect").value(["0"])這種形式進行賦值。

這樣的辦法就會存在一個bug，就是一旦組件剛加載完成，而且沒有進行初始化賦值的時間點，用戶進行了選擇，瀏覽器就會報錯了。

因此建議在使用的時候，須要給組件默認值，那麼就在初始化組件的時候進行賦值。

 

（2）對於選中項有特殊要求

要求內容以下：

可選項包括：「所有」、「部分1」、「部分2」、「部分3」、「部分4」、「部分5」；當選擇「所有」的時候，其餘被選中的選項都要清楚掉；當選擇除了「所有」以外的其餘選項時，要把已經選中的「所有」選項刪除。

實現代碼以下：

$("#MultiSelect").kendoMultiSelect({ placeholder: "請選擇...", dataTextField: "Text", dataValueField: "Value", autoBind: false, dataSource: { data：[ {Text:"所有",Value:"0"}, {Text:"部分1",Value:"1"}, {Text:"部分2",Value:"2"}, {Text:"部分3",Value:"3"}, {Text:"部分4",Value:"4"}, {Text:"部分5",Value:"5"} ] }, noDataTemplate: '沒有找到相關數據!', change: function (e) { var value = this.value(); if (value.indexOf("") != -1) { var nullIndex = value.indexOf(""); value.splice(nullIndex, 1); $("#MultiSelect").data("kendoMultiSelect").value(value); } var index = value.indexOf("0"); if (index!=-1 && index == value.length - 1) { this.value(["0"]); } else if (index != -1) { var val = $("#MultiSelect").data("kendoMultiSelect").value(); val.splice(index,1); $("#MultiSelect").data("kendoMultiSelect").value(val); } } }).data("kendoMultiSelect");

主要的實現思路就是，經過change事件，判斷當前選擇的項是否是所有，若是是所有，就讓多選框的value是所有；

若是不是所有，那麼就判斷已經選中的項是否有「所有」，有的話就把所有去除。

由於change事件並不能直接獲取到當前選中的元素，因此是經過判斷選中項的值裏是否包含「所有」，包含即index!=-1 ;當前選中的最後一項 index==value.length-1就是是「所有」。

=====================================================

可能有人會說爲何不用select事件，這樣能夠直接判斷當前的選中項，這個我試過，不過不知道爲啥，再給多選框傳值的時候就是傳不進去，不知道是個人寫法有問題，仍是什麼鬼，歡迎你們嘗試和分享，謝謝！