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部分，否则会报错。

时间： 2024-10-14 20:17:33

KendoUi中KendoDropDownList控件的使用——三级级联模块的实现的相关文章

C#中WebBrowser控件的使用

今天在YouTube上看了一个关于WebBrowser控件用法的小视频,做一下总结. 首先创建一个WinForm程序,拖入一个textbox控件和一个button按钮,然后拖入一个panel控件,如图所示: 拖入panel控件后,找到WebBrowser控件并双击,WebBrowser控件就会自动填充到panel控件上,像下面这样: 之后给button改个名,双击button按钮设置一个简单的跳转行为: private void goButton_Click(object sender, Eve

设定当前视图中所有控件字体的方法

     本范例实现的是对界面中所有的控件一次性的设置字体样式.思路是找到父控件,然后遍历子控件.如果子控件是可以修改文字的控件,那么就设置文字.这用到了控件的继承,很多控件都是继承与textview的,所以将控件均转为textview,最后设置字体即可. 布局文件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.

winform窗体中查找控件

private RichTextBox FindControl()        { RichTextBox ret = null;            try            {                Control[] controls = Application.OpenForms["MainForm"].Controls.Find("txtContent", false);                if (controls != nul

android include中的控件调用

项目中经常会有一些布局是重用的,但是如何来更好的利用这些布局中的控件 转: http://zhidao.baidu.com/link?url=GU93U8Wu31dfp7mKEx52hMJkxjFLCq3WGkvZ8IMrahQT3wgAbC1Y93sKQ36_GQo3V4-Q9KWRHD6RIxMgBYj0zY7YsYNQuGFGjahZsFnz9wq <include android:id="@+id/view_counter_buttons_1" layout="

Android自定义控件系列 十：利用添加自定义布局来搞定触摸事件的分发，解决组合界面中特定控件响应特定方向的事件

这个例子是比较有用的,基本上可以说,写完这一次,以后很多情况下,直接拿过来addView一下,然后再addInterceptorView一下,就可以轻轻松松的达到组合界面中特定控件来响应特定方向的触摸事件了. 请尊重原创劳动成果,转载请注明出处:http://blog.csdn.net/cyp331203/article/details/45198549,非允许请勿用于商业或盈利用途,违者必究. 在写Android应用的过程之中,经常会遇到这样的情况:界面包含了多个控件,我们希望触摸在界面上的不

C#winform中使用控件的Dock属性进行布局

想要实现如下布局,可以通过设置控件的Dock属性达到效果 1.拖放一个panel控件一个label控件(放在panel中)和一个treeView控件到TestForm中 2.设置panel的Dock属性为Top(设置BorderStyle属性为FixedSingle,这样显得美观些),设置treeView的Dock属性为Fill 3.需要注意的是要先把panel放到TestForm中,先放treeView就会使得treeView填充TestForm而被后放置的panel遮盖,如下所示 4.想要实

WPF中Ribbon控件的使用

这篇博客将分享如何在WPF程序中使用Ribbon控件.Ribbon可以很大的提高软件的便捷性. 上面截图使Outlook 2010的界面,在Home标签页中,将所属的Menu都平铺的布局,非常容易的可以找到想要的Menu.在Outlook 2003时代,将Home下面的Menu都垂直的排列下来,操作的便捷程度降低了很多.Ribbon的布局会随着窗体的变化动态的调整. 上面的图片中标注了Ribbon的4个区块. 下面我们就在WPF中使用Ribbon控件来实现一个简单的界面. 1. 添加System

在子线程中更改主线程中的控件的信息,在子线程中用toast

一丶在子线程中不允许更改主线程中的控件的信息,也不允许在子线程中用toast,我们要更改的话 (1)消息机制:使用handler (由主线程调用) 在主程序中Handler handler = new Handler(){ public void handleMessage(Message msg){ int type = msg.what ;//拿到msg的类型,再判断            switch (type) {                case SUCCESS:      

.NET中TextBox控件设置ReadOnly=true后台取不到值三种解决方法

.NET中TextBox控件设置ReadOnly=true后台取不到值三种解决方法 当TextBox设置了ReadOnly=true后要是在前台为控件添加了值,后台是取不到的,值为空,多么郁闷的一个问题经过尝试,发现可以通过如下的方式解决这个问题.感兴趣的朋友可以了解下 当TextBox设置了ReadOnly="true" 后,要是在前台为控件添加了值,后台是取不到的,值为“空” 原理没想通,说不清楚微软是出于什么考虑的,不过有时是要我们能通过前台脚本来填充值,并不希望用户修改其控件内