好久没有更新,实在抱歉,最近患上了懒癌,惭愧!
这篇文章直接上干货吧!
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事件,这样可以直接判断当前的选中项,这个我试过,不过不知道为啥,再给多选框传值的时候就是传不进去,不知道是我的写法有问题,还是什么鬼,欢迎大家尝试和分享,谢谢!