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

最新推荐文章于 2022-03-23 14:30:03 发布

Monkey_Online

最新推荐文章于 2022-03-23 14:30:03 发布

阅读量9.1k

点赞数 4

分类专栏： JavaScript 文章标签： JS KendoUi kendoDropDownList

本文链接：https://blog.csdn.net/houqd2012/article/details/41979011

版权

本文介绍了如何使用KendoUI中的KendoDropDownList控件实现三级级联功能，详细讲解了数据源设置、控件展示模板、数据过滤filter以及点击事件的处理，适用于权限系统开发中的模块展示。

摘要由CSDN通过智能技术生成

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的使用，虽然