级联加载部门树

通过级联加载部门树,用SQL来验证部门子集是否存在。
select ID,DEPT as name,
		(case when (select count(*) from SM_DEPT b where b.PID=a.ID)>0 then 'Y' else 'N'  end) as PATH
		 from SM_DEPT a where PID='${PID}' ORDER BY SNO

根据PATH字段来确定是否还有子集,然后根据数据进行数据处理

项目涉及技术:    1、前端:jsp、css、javascript、jQuery(js框架)、jQueryEasyUi(基于jQuery的前端框架)+BootStrap(前端框架)、dTree插件、富文本编辑器等 2、后台:SpringMvc、Spring、Hibernate(持久层框架)、JPA、MD5加密、Spring Boot、 log4J日志框架、jstl、jstl自定义分页标签等3、项目管理工具:Maven4、数据库:Mysql5、服务器:Tomcat项目开发涉及功能: 1、项目以及数据库搭建2、用户异步登录、退出以及记住用户信息3、自定义分页标签实现(24种样式随意切换)4、拦截器功能实现5、整合前端框架 EasyUi以及Bootstrap6、用户模块信息添加、修改、删除、多条件分页查询、激活、预览、用户账号异步校验、异步加载部门以及职位信息7、角色模块添加、删除、修改、分页查询、角色绑定以及解绑用户、角色绑定以及解绑操作8、Spring事务处理机制讲解9、模块管理增加、修改、删除、分页查询、整合dTree形插件10、项目实现权限控制11、公告模块整合富文本编辑器12、密码进行MD5加密13、项目改版成Spring Boot实现14、代码机器人使用等等功能其他实战项目:java项目实战之电商系统全套(前台和后台)(java毕业设计ssm框架项目)https://edu.csdn.net/course/detail/25771 java项目之oa办公管理系统(java毕业设计)https://edu.csdn.net/course/detail/23008 java项目之hrm人事管理项目(java毕业设计)https://edu.csdn.net/course/detail/23007 JavaWeb项目实战之点餐系统前台https://edu.csdn.net/course/detail/20543 JavaWeb项目实战之点餐系统后台https://edu.csdn.net/course/detail/19572 JavaWeb项目实战之宿舍管理系统(Java毕业设计含源码)https://edu.csdn.net/course/detail/26721 JavaWeb项目实战之点餐系统全套(前台和后台)https://edu.csdn.net/course/detail/20610 java项目实战之电子商城后台(java毕业设计SSM框架项目)https://edu.csdn.net/course/detail/25770 java美妆商城项目|在线购书系统(java毕业设计项目ssm版)https://edu.csdn.net/course/detail/23989 系统学习课程:JavaSE基础全套视频(环境搭建 面向对象 正则表达式 IO流 多线程 网络编程 java10https://edu.csdn.net/course/detail/26941 Java Web从入门到电商项目实战挑战万元高薪(javaweb教程)https://edu.csdn.net/course/detail/25976其他素材版(毕业设计或课程设计)项目:点击老师头像进行相关课程学习
Layui 是一个非常流行的前端 UI 框架,它的 select 组件支持级联加载多级下拉的功能。以下是一个简单的使用 Layui select 组件实现级联下拉的 DEMO 示例: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui select 级联加载多级下拉示例</title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css"> </head> <body> <div class="layui-container"> <div class="layui-row"> <div class="layui-col-xs12"> <label class="layui-form-label">选择城市</label> <div class="layui-input-inline"> <select name="city" id="citySelect" lay-filter="citySelect"> <option value="">请选择省份</option> </select> </div> </div> </div> </div> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script> <script> layui.use(['form', 'layer', 'jquery'], function(){ var $ = layui.jquery; var form = layui.form; // 模拟从服务器获取数据 function getData(level, father) { var html = ''; for(var i = 0; i < 4; i++) { html += '<option value="' + level + i + '">' + level + i + '</option>'; } return html; } // 省份数据 var data1 = getData('省', ''); // 初始化城市下拉框 $('#citySelect').val('1'); form.render('select'); // 级联操作 var data2 = {}; $('#citySelect').change(function(){ // 根据选择的省份值来显示对应的城市数据 var selectVal = $(this).val(); if(selectVal) { // 用layer弹窗显示下一级数据 layer.open({ type: 1, area: ['80%', '80%'], title: '请选择城市', content: '<select name="city" lay-filter="citySelect2">' + '<option value="">加载中...</option>' + data2[selectVal] || getData('市', selectVal) + '</select>', end: function(){ // 如果有下一级,则继续级联 var citySelect2 = document.querySelector('[name="city"][lay-filter="citySelect2"]'); citySelect2.onchange = function(){ var cityVal = $(this).val(); // 更改数据,实际应用中是去服务器获取数据 data2[cityVal] = getData('区', cityVal); // 重新赋值并渲染 $(this).html(data2[cityVal]); form.render('select'); }; } }); } }); }); </script> </body> </html> ``` 在这个 DEMO 中,我们首先定义了一个名为 `citySelect` 的下拉框,并且通过 `lay-filter` 属性指定了一个过滤器名称。当下拉框的值发生变化时,会触发一个级联加载的操作,这里使用了 Layui 的 layer 组件来弹出一个新的下拉框,并通过 `change` 事件实现级联效果。 需要注意的是,上述代码仅作为一个示例,其中的数据是通过 `getData` 函数模拟生成的。在实际应用中,您需要从服务器动态获取数据,并替换模拟数据部分。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值