KendoUi中KendoDropDownList控件的使用——三级级联模块的实现
Posted gavanwanggw
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了KendoUi中KendoDropDownList控件的使用——三级级联模块的实现相关的知识，希望对你有一定的参考价值。
1. 应用需求
在权限系统开发中除了以上数据表关系的设计之外。比較麻烦的地方是级联模块在页面的展示，因为设计中最多是控制到三级，因此三级级联模块的展示、编辑等页面操作是须要解决的问题，这里採用KendoUi中的KendoDropDownList来实现，它能够轻松的实现我们想要实现的效果。基本效果图例如以下：
如上图的关系为：通用支撑子系统（一级）包括：系统管理、用户管理、日志管理（二级）子系统；系统管理子系统中又包括管理模块（三级模块）。
每一级别的变动，其下属级别模块均会对应变化。
2. 代码演示样例
以下就通过一些代码解说一下我们前面实现的效果，这里的数据也是模拟我们上面的数据。
页面的基本效果例如以下：
首先，使用KendoUi须要将对应的js文件引入，这里引入：jquery.min.js以及kendo.all.min.js就可以。
html部分：
<link href="kendo.bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="kendo.common.core.min.css" rel="stylesheet" type="text/css" /> <link href="kendo.common.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="kendo.all.min.js"></script> <body> 全部控件的dataSource均来自同一个数组,通过过滤器进行条件过滤 <br/> 父元素:<select id="first"></select> <br /> 子元素:<select id="second"></select> <br /> 子元素详情:<div id="grid" style="width: 100%; height: 500px;"></div> <br /> </body>
非常easy，就是定义一级模块、二级模块的select标签以及三级模块的展示标签div。并给予id属性。
注意：三级模块的展示。这里使用的是KendoUi中的KendoGrid，能够定义我们自己的展示表格，这里暂不介绍KendoGrid的使用，尽管两者之间有非常多共同的地方。
JS部分：
<script type="text/javascript">
//数据
var globalData = [
{"id":"0","pid":"32","bz_id":"-1","sub_id":"-1","value":"通用支撑子系统"},
{"id":"1","pid":"33","bz_id":"-1","sub_id":"-1","value":"计算资源管理子系统"},
{"id":"1","pid":"34","bz_id":"0","sub_id":"-1","value":"用户管理"},
{"id":"2","pid":"35","bz_id":"0","sub_id":"-1","value":"日志管理"},
{"id":"3","pid":"36","bz_id":"1","sub_id":"-1","value":"节点负载查看"},
{"id":"4","pid":"37","bz_id":"1","sub_id":"-1","value":"节点使用率查看"},
{"id":"5","pid":"38","bz_id":"0","sub_id":"-1","value":"系统管理"},
{"id":"0","pid":"3211","bz_id":"0","sub_id":"5","value":"管理模块"},
{"id":"1","pid":"3212","bz_id":"0","sub_id":"1","value":"管理角色"},
{"id":"2","pid":"3213","bz_id":"0","sub_id":"1","value":"管理用户"},
{"id":"3","pid":"3214","bz_id":"0","sub_id":"2","value":"查看日志"},
{"id":"4","pid":"3215","bz_id":"1","sub_id":"3","value":"网络负载"},
{"id":"5","pid":"3216","bz_id":"1","sub_id":"3","value":"IO负载"},
{"id":"6","pid":"3217","bz_id":"1","sub_id":"4","value":"CPU使用率"},
{"id":"7","pid":"3218","bz_id":"1","sub_id":"4","value":"内存使用率"}
];
var firstDropDownList = null;
var secondDropDownList = null;
var grid = null;
$(document).ready(function()
{
//初始化控件
firstDropDownList = $("#first").kendoDropDownList({
dataTextField:"value",
dataValueField:"value",
dataSource:{
<span style="color:#FF0000;">data:globalData</span>
},
<span style="color:#3333FF;">template:kendo.template($("#template").html()),</span>
change:function()
{
//改动值后更新下拉列表2和表格数据
var sed_filter={logic:"and", filters:[]};
var one_filter={field:"bz_id", operator:"eq", value: parseInt(this.dataItem().id)};
var two_filter={field:"sub_id", operator:"eq", value: -1};
sed_filter.filters.push(one_filter);
sed_filter.filters.push(two_filter);
secondDropDownList.dataSource.filter(sed_filter);
var filter={logic:"and", filters:[]};
var bz_filter = {field:"bz_id", operator:"eq", value: parseInt(this.dataItem().id)};
var sub_filter = {field:"sub_id", operator:"eq", value: parseInt(secondDropDownList.dataItem().id)};
filter.filters.push(bz_filter);
filter.filters.push(sub_filter);
grid.dataSource.filter(filter);
}
}).data("kendoDropDownList");
secondDropDownList = $("#second").kendoDropDownList({
dataTextField:"value",
dataValueField:"value",
dataSource:{
<span style="color:#FF0000;">data:globalData</span>
},
<span style="color:#3333FF;">template:kendo.template($("#template").html()),</span>
change:function()
{
var filter={logic:"and", filters:[]};
var bz_filter = {field:"bz_id", operator:"eq", value: parseInt(firstDropDownList.dataItem().id)};
var sub_filter = {field:"sub_id", operator:"eq", value: parseInt(this.dataItem().id)};
filter.filters.push(bz_filter);
filter.filters.push(sub_filter);
grid.dataSource.filter(filter);
}
}).data("kendoDropDownList");
grid = $("#grid").kendoGrid({
dataSource:{
<span style="color:#FF0000;">data:globalData</span>
},
columns:[
{
title:"模块PID",
field:"pid"
},
{
title:"模块名称",
field:"value"
}
]
}).data("kendoGrid");
//初始化控件结束
//初始数据过滤
firstDropDownList.dataSource.filter({ field: "bz_id", operator: "eq", value: -1 });
var sed_filter={logic:"and", filters:[]};
var one_filter={field:"bz_id", operator:"eq", value: parseInt(firstDropDownList.dataItem().id)};
var two_filter={field:"sub_id", operator:"eq", value: -1};
sed_filter.filters.push(one_filter);
sed_filter.filters.push(two_filter);
secondDropDownList.dataSource.filter(sed_filter);
var filter={logic:"and", filters:[]};
var bz_filter = {field:"bz_id", operator:"eq", value: parseInt(firstDropDownList.dataItem().id)};
var sub_filter = {field:"sub_id", operator:"eq", value: parseInt(secondDropDownList.dataItem().id)};
filter.filters.push(bz_filter);
filter.filters.push(sub_filter);
grid.dataSource.filter(filter);
});
</script>
<span style="color:#3333FF;"><script id="template" type="text/x-kendo-template">
<option id="#:id#" pid="#:pid#" bz_id="#:bz_id#" sub_id="#:sub_id#" value="#:value#">#:value#
</option>
</script></span>
这里须要注意下面几点：
1. 控件的数据来源
因为一级模块、二级模块以及三级模块事实上都是属于模块一类的数据，因此这三类中的数据能够採用一套，然后再通过filter控制显示不同模块的数据，如上JS代码中红色标注的dataSource部分。即採用一份数据：globalData（当然这里的数据能够是来自于php中获得的数据，假设是採用PHP中的数据的话，则代码为：data:<?php echo $globalData;?>）。
对于dataSource中data的数据格式必须是JSON的形式。因此不管数据来源是JS或者是PHP其构造成的数据必须是JSON格式。
2. 控件的展示模板
定义控件的展示模板。是为了让我们更好的控制控件显示。为控件加入filter，如上JS中的蓝色标注部分即为模板的定义以及使用，比如：<option id="#:id#" pid="#:pid#" bz_id="#:bz_id#" sub_id="#:sub_id#" value="#:value#">#:value# </option>，这样我们就能够在filter中利用我们定义的空间属性比如：id、pid、bz_id等对控件相互之间的关系进行控制。
3. 控件的数据过滤filter
filter，即为过滤，它是对控件的dataSource中的data集进行过滤。然后再显示在控件中。
以下以样例中的效果为例来解说一下filter的使用。
首先。当初始化时我希望，一级模块控件中显示第一个一级模块。二级模块中显示与以及模块相应的一级模块包括的二级模块。而在三级模块中则显示与此相应的三级模块。
初始化时：firstDropDownList.dataSource.filter({ field: "bz_id", operator: "eq", value: -1 });控制一级模块显示，这里定义的规则为一级模块的bz_id == -1；二级模块则依据一级模块的值来显示：
var sed_filter={logic:"and", filters:[]};
var one_filter={field:"bz_id", operator:"eq", value: parseInt(firstDropDownList.dataItem().id)};
var two_filter={field:"sub_id", operator:"eq", value: -1};
sed_filter.filters.push(one_filter);
sed_filter.filters.push(two_filter);
secondDropDownList.dataSource.filter(sed_filter);这里定义的二级模块的显示规则为二级模块的bz_id = 一级模块的值 && sub_id == -1。
三级模块则依据一级与二级模块的值显示：
var filter={logic:"and", filters:[]};
var bz_filter = {field:"bz_id", operator:"eq", value: parseInt(firstDropDownList.dataItem().id)};
var sub_filter = {field:"sub_id", operator:"eq", value: parseInt(secondDropDownList.dataItem().id)};
filter.filters.push(bz_filter);
filter.filters.push(sub_filter);
grid.dataSource.filter(filter);
4. 控件的点击事件
当一级模块值改变时。二级模块与三级模块的值均发生改变；当二级模块的值改变时三级模块的值会发生改变。这是通过在KendoDropDownList中的change事件来改变的，至于规则，则非常上面的一样。以一级模块改变为例：
change:function()
{
//改动值后更新下拉列表2和表格数据
<span style="font-family:宋体;"> </span>var sed_filter={logic:"and", filters:[]};
var one_filter={field:"bz_id", operator:"eq", value: parseInt(this.dataItem().id)};
var two_filter={field:"sub_id", operator:"eq", value: -1};
sed_filter.filters.push(one_filter);
sed_filter.filters.push(two_filter);
secondDropDownList.dataSource.filter(sed_filter);
var filter={logic:"and", filters:[]};
var bz_filter = {field:"bz_id", operator:"eq", value: parseInt(this.dataItem().id)};
var sub_filter = {field:"sub_id", operator:"eq", value: parseInt(secondDropDownList.dataItem().id)};
filter.filters.push(bz_filter);
filter.filters.push(sub_filter);
grid.dataSource.filter(filter);
}另外，假设想採用secondDropDownList.dataItem().id来取得模板中的其他属性值。比如bz_id,sub_id等，则在定义secondDropDownList的时候必须加上：
var secondDropDownList = $("#xxx").kendoDropDownList({...}).data("kendoDropDownList");的.data部分，否则会报错。
以上是关于KendoUi中KendoDropDownList控件的使用——三级级联模块的实现的主要内容，如果未能解决你的问题，请参考以下文章
如何通过在 ASP.NET MVC 框架中调用 ajax 来显示 kendoDropDownList？
如何在 kendoDropDownList 中自动将光标放在文本框上，如 kendoMultiSelect DropDown