KendoUi中KendoDropDownList控件的使用——三级级联模块的实现
来源:互联网 发布:wps怎么合计数据 编辑:程序博客网 时间:2024/05/17 08:05
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>
很简单,就是定义一级模块、二级模块的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控件的使用——三级级联模块的实现
- kendoUI中window控件的使用
- 用KendoUI实现下来列表的级联
- KendoUI:Grid控件的使用
- KendoUI:Grid控件的使用
- KendoUi控件kendoGrid中template中条件判断的使用
- 使用JQuery实现漂亮的三级级联下拉框
- 使用JQuery实现漂亮的三级级联下拉框
- 省市县三级级联的实现
- KendoUI的学习和使用
- JSP+AJAX三级级联及更多级的实现。。正在进行中
- JSP+AJAX三级级联及更多级的实现。
- KendoUI —— 关于 KendoUI
- 使用Ajax实现三级级联菜单
- Android中Spinner控件及级联Spinner的使用
- kendoDropDownList使用经验
- 兼容性好的省市三级级联菜单
- .net3.5 和vs2008中Ajax控件的使用--CascadingDropDown(作级联下拉菜单)控件
- Swing编程方面步骤之四java绘图技术画小乌龟
- vi/vim如何添加或删除多行注释
- TextBox控件实例
- hdu 1021
- Java中 堆 栈,常量池等概念解析(转载)
- KendoUi中KendoDropDownList控件的使用——三级级联模块的实现
- MyEclipse配置JDK
- eclipse .properties插件的安装
- 编写守护进程,并使用守护进程按要求生成.log文件
- CentOS下添加动态链接库的方法
- foreach 遍历二维数组
- GLSL(OpenGL Shading Language) NOTES
- 【Matlab】将avi视频提取出帧序列图片并保存
- 相关分析第一步:判断变量的总体是否正态分布