layui树形组件动态实现

最新推荐文章于 2024-06-28 03:45:22 发布

今天打代码刷题了吗

最新推荐文章于 2024-06-28 03:45:22 发布

阅读量1.3k

点赞数 1

分类专栏： html 文章标签： java mysql html

本文链接：https://blog.csdn.net/chaotiantian/article/details/117380747

版权

html 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

前台页面HTML

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="./layui/css/layui.css" media="all">
		<script type="text/javascript" src="js/global.js"></script>
		<script src="./layui/layui.js" charset="utf-8"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
	</head>

	<body>
		<div hidden="hidden" class="layui-form-item" style="margin-top: 20px">
			<label class="layui-form-label">ID：</label>
			<div class="layui-input-inline" style="width: 350px">
				<input type="text" name="id" id="userid" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
			</div>
		</div>
		</div>
		<div id="demo" class="demo-tree-more"></div>
		<div class="layui-form-item">
			<div class="layui-input-block" style="margin-left:0;text-align:center;">
				<button class="layui-btn layui-btn-blue" id="formDemo">确认选择</button>
			</div>
		</div>
		<script>
			layui.use(['tree'], function() {
				$ = layui.$;
				var tree = layui.tree;

				function getReole() {
					var userid = document.getElementById("userid").value; //当前角色的id
					$.ajax({
						url: globalData.server + "./Modules/getAllModulesss", //拿到所有模块
						type: "post",
						datatype: "json",
						async: false,
						data: {
							"userId": userid //角色id传到后台
						},
						success: function(data1) {
							tree.render({ //tree.render() 方法指定一个元素，便可快速创建一个 tree 实例
								elem: '#demo', //传入元素选择器
								showCheckbox: true, //是否显示复选框
								data: data1, //获取节点数据
								id: 'id', //定义索引 
							});
						},
					});

					$("#formDemo").click(function() { //提交
						var checkData = tree.getChecked('id'); //获得选中的节点
						if(checkData.length == 0) { //判断复选框是否被选中
							layer.msg("请至少选择一个节点", {
								icon: 6
							});
							return false;
						} else {
							var ids = [];
							var chil = [];
							for(var key in checkData) { //循环父节点
								var node = checkData[key];
								ids.push(node.id); //在父节点末尾添加一个或多个元素
								chil = node.children; //获取子节点数组
								for(var key in chil) { //循环子节点
									var children = chil[key];
									ids.push(children.id); //在子节点末尾添加一个或多个元素
								}
							}
							$.ajax({
								url: globalData.server + './ModulesRoles/addModuleByIdRoles', //根据角色id添加模块
								type: "POST",
								datatype: "json",
								async: false,
								data: {
									"roleId": userid,
									'ids': JSON.stringify(ids),
								}, //传数据给后台
								success: function(result) {
									if(result.count > 0) {
										layer.msg(result.msg, {
											icon: 6
										});
										setTimeout(function() { //延迟加载
											var index = parent.layer.getFrameIndex(window.name);
											parent.layer.close(index); //关闭当前页
										}, 2000);

									} else {
										layer.msg(result.msg, {
											icon: 6
										});
									}
								}
							});
						}
					});

				}
				setTimeout(function() {//延迟加载
					getReole();
				}, 500);
			});
		</script>

	</body>

</html>

实体类

package com.crm.entity;

import java.util.ArrayList;
import java.util.List;

import com.crm.entity.Modules;

import lombok.Data;

//模块表
@Data
public class Modules {
	private Integer id;//id
	private String name;// 模块名称
	private String title;// 这个字段数库没有 因为我们树形组件里的名称使用的是title，所以在这里建立了一个title，大家建数据库时建议写成title
	private Boolean checked;// 是否选中 true   这个字段数库也是没有
	private Integer parentId;//父模块编号
	private String path;//模块路径
	private String weight;//权重
	private String one;// 预留
	private String two;//预留
	private List<Modules> children = new ArrayList<>();//用来存放子模块数据
}

服务层实现类代码

//	树形组件获取所拥有的的菜单信息：，=true 勾选
	@Override
	public List<Modules> getAllModulesss(int userId) {
		// TODO Auto-generated method stub
		List<Modules> list = new ArrayList<>();
		List<Modules> listss = new ArrayList<>();
		list = modulesDao.getAllModulesAlls();// 获取所有
		for (Modules modules : listss) {//默认checked都是false
			modules.setChecked(false);
		}
		listss = modulesDao.getAllModuless(userId);// 根据用户获取用户拥有的菜单
		List<Modules> treeNodes = new ArrayList<Modules>();//新建一个数组，用来存放最终数据
		for (Modules treeNode : list) {// 循环所有菜单
			for (Modules item : listss) {// 根据用户获取用户拥有的菜单
				if (treeNode.getId() == item.getId()) {//相等证明被选中checked是true
					treeNode.setChecked(true);// 根据用户获取用户拥有的菜单 去添加
				}
			}	
		}
		for (Modules treeNode : list) {// 循环菜单转换成菜单树
			if (treeNode.getParentId() == 0 || treeNode.getParentId() == null) {//treeNode父级id=0或空证明是父模块
				treeNodes.add(findChildren(treeNode, list));//把子模块添加到父模块中
			}

		}
		for (Modules modules : treeNodes) {// 循环所有菜单
			if (modules != null && modules.getChildren() != null && modules.getChildren().size() > 0) {
				int i = 0;
				for (Modules modules2 : modules.getChildren()) {// 循环选中的子模块判断是否被选中
					if (modules2.getChecked() != null && modules2.getChecked() == true) {// 子模块被选中 i+1
						i += 1;
					}
				}
				if (i != modules.getChildren().size()) {// 判断是否和子模块是否全部选中
					modules.setChecked(false);
				}
				i = 0;//i初始化
			}

		}
		return treeNodes;
	}
	// 给父级菜单设置子级
	public Modules findChildren(Modules treeNode, List<Modules> treeList) {
		for (Modules item : treeList) {//对treeList进行循环
			if (treeNode.getId() == item.getParentId()) {//判断treeNode中的id与item中的父级模块id是否相同，相等，判断treeNode子模块是否为空
				if (treeNode.getChildren() == null) {
				//为空把数据添加到子模块数组里
					treeNode.setChildren(new ArrayList<Modules>());
				}
				treeNode.getChildren().add(findChildren(item, treeList));// 递推赋值
			}
		}
		return treeNode;// 返回菜单树
	}