kendo upload php,（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代码：

Products

$("#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}

]

});

});

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

参数简介：

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

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