Kendo UI 多選的實現

頁面定義：

//定義元素
<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"));
		}
	};

最終實現：