Kendo UI 多選的實現
阿新 • • 發佈:2018-11-13
頁面定義:
//定義元素 <div> <input type="text" id="category" class="width-90Pc only-text" /> </div> //使用Kendo UI的模板語言對資料進行格式化,資料可以條件化,樣式化。 <script id="tagTemplate" type="text/x-kendo-template"> # var resultList = []; if(data.values.length > 1 && data.values.indexOf("All") > -1){ resultList = _.filter(data.values, function(item){ return item != "All"; }); data.values = resultList; } # # if(data.values.length == 1){ # <span> #: data.values[0]# </span> # } else{ # <span> #: data.values.length # items</span> # } # </script>
JS 實現:
在js 裡面實現對元素的初始化並繫結操作的事件:
var categoryMultipleDropdow = function(categoryId){ //通過ajax 服務返回資料 源 var param = {}; var url = ""; CommonUtils.ajax.callService("POST", url, param, function(data){ if (data && data.RESPONSE_CD == '0') { //設定預設的All 下啦屬性 var defaultValue = [{"category":"All"}]; var dataList = defaultValue.concat(data.DATA); $("#" + categoryId).kendoMultiSelect({ itemTemplate: "<input type='checkbox'/> #:data.category#", //使用jsp上的模板輸出 tagTemplate: kendo.template($("#tagTemplate").html()), dataTextField: "category", dataValueField: "category", dataSource: dataList,//資料來源 autoClose: false, tagMode: "single", filter: "contains", dataBound : function() { var items = this.ul.find("li"); var $this = this; setTimeout(function() { dataBoundInputs(items,$this); }); }, change : function() { var $this = this; var items = this.ul.find("li"); checkChangeInput(items,$this); } }); $("#" + categoryId).data("kendoMultiSelect").value({"category":"All"}); } },function(data){ //ajax異常處理}); }; var dataBoundInputs = function (elements,$this){ var values = $this.value(); for(var j = 0;j <= values.length; j++){ for(var i = 0; i <= elements.length;i++){ var element = $(elements[i]); var input = element.children("input");//get checkbox if($.trim($(element).text()) == values[j]){ input.prop("checked", element.hasClass("k-state-selected")); } } } }; //資料改變了的處理事件 var checkChangeInput = function (elements,$this){ var values = $this.value(); if(values.length == 0){ $this.value("All"); return false; } // All in header if(values.length == 2 && values[0] == "All"){ //update value var result = _.filter(values, function(item){ return item != "All"; }); $this.value(result); } //select all if(values[values.length - 1] == "All"){ for(var i = 0; i <= elements.length;i++){ var element = $(elements[i]); var input = element.children("input");//get checkbox if($.trim($(element).text()) == "All"){ input.prop("checked", element.removeClass("k-state-selected")); } //update value var result = _.filter(values, function(item){ return item == "All"; }); $this.value(result); break; } } for(var i = 0; i <= elements.length;i++){ var element = $(elements[i]); var input = element.children("input");//get checkbox input.prop("checked", element.hasClass("k-state-selected")); } };
最終實現: