页面定义:
//定义元素
<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"));
}
};
最终实现: