（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事件，这样能够直接判断当前的选中项，这个我试过，不过不知道为啥，再给多选框传值的时候就是传不进去，不知道是个人写法有问题，仍是什么鬼，欢迎你们尝试和分享，谢谢！