（10）kendo UI使用基础介绍与问题整理——MultiSelect

好久没有更新，实在抱歉，最近患上了懒癌，惭愧！

这篇文章直接上干货吧！

1、基础简介

官网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>

相信聪明的你能看懂上面的代码。

参数简介：

原谅我偷懒，大家参考官网的文档自行查看吧，主要整理一下我实际遇到的小问题，有需要的看看下面的“实际小分析”吧。

2、实际小分析

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