layui树形组件使用（tree.render()）ssm

layui树形组件使用（tree.render()）基于ssm实现功能一、演示效果二、后端返回数据格式注意：使用树形组件回显的字段必须有id，title，checked。否则会无数据，并且父节点一定要为false，子节点打勾的为true。三、前端代码1.HTML部分<script type="text/html" id="barDemo"><a class="layui-btn

New Object ABC

7577人浏览 · 2021-05-25 19:54:27

New Object ABC · 2021-05-25 19:54:27 发布

layui树形组件使用（tree.render()）基于ssm实现功能

一、演示效果
在这里插入图片描述
二、后端返回数据格式

注意：使用树形组件回显的字段必须有id，title，checked。否则会无数据，并且父节点一定要为false，子节点打勾的为true。

三、前端代码
1.HTML部分

<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="setModule"><i class="layui-icon">&#xe620;</i>设置权限</a>
</script>
<!--设置权限-->
<div id="diaSetRight" style="display: none;" title="设置权限" style="width:300px;height:600px; margin: 10px auto;">
	<table id="tabEdit">
		<tr>
			<td>
				<div id="rightTree"></div>
			</td>
		</tr>
		<tr>
			<td style="text-align: center; padding: 10px;">
				<a id="setRole" href="#" class="layui-btn"><i class="layui-icon">&#xe605;</i>保存设置</a>
			</td>
		</tr>
	</table>
</div>

2.js部分

//监听数据行工具栏按钮事件
table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
	var data = obj.data; //获得当前行数据
	var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
	var tr = obj.tr; //获得当前行 tr 的DOM对象

	if(layEvent === 'setModule') { //设置模块
		arr = [];
		$.post(globalData.server + "roles/GetModulesByRoleIdLayUI", {
			token: globalData.token,
			rolesIds: data.id
		}, function(r) {
			tree.render({
				elem: '#rightTree',
				data: r,
				id: 'roleTreeId',
				showCheckbox: true
			})
			cur_roleId = data.id;
		}, "json");
		//打开设置权限窗口
		setIndex = layer.open({
			type: 1,
			content: $('#diaSetRight'),
			title: "正在设置角色[" + data.name + "]的权限模块",
			area: ['300px', '400px']
		});
	}
});

//给角色设置权限
$("#setRole").click(function() {
	var nodes = tree.getChecked('roleTreeId');
	//字符串拼接基本功，要求手熟
	for(var i = 0; i < nodes.length; i++) {
		getChildenId(nodes[i]); //调用递归的方法来获取所有选中节点的Id
	}
	//调用远程接口保存设置
	$.post(globalData.server + "roles/SetSysRights", {
		parentIds: arr.join(","),
		rId: cur_roleId,
		token: globalData.token
	}, function(r) {
		if(r) {
			layer.msg('保存权限成功！', {
				icon: 1,
				time: 1000
			}, function() {
				layer.close(setIndex); //关闭修改弹出层
				window.top.getMenu();
			});
		} else {
			layer.msg('保存权限失败！', {
				icon: 2,
				time: 1000
			})
		}
	}, "json");
});

//var active={del:3,reload:1,load:2};
$('.demoTable .layui-btn').on('click', function() {
	var type = $(this).data('type');
	active[type] ? active[type].call(this) : '';
});

});
var arr = [];
//递归获取选中节点的Id
function getChildenId(node) {
	if(node != null) {
		arr.push(node.id);
		for(var i = 0; node.children != null && i < node.children.length; i++) {
			getChildenId(node.children[i]);
		}
	}
}

四、后端代码
1.mapper接口

/**
 * 根据角色id查询全部树形<用户设置权限>
 * @param rolesIds List<ModulesTreeNode>
 * @return
 */
List<ModulesTreeNode> selectAllTree(String rolesIds);

/**
 * 移除角色权限
 * @param roleid
 * @param moduleid
 * @return
 */
int deleteByUidAndModuleid(String roleid,String moduleid);
 
 /**
  * 分配角色权限
  * @param id
  * @param roleid
  * @param moduleid
  * @return
  */
int insertByUidAndModuleid(String id,String roleid,String moduleid);

2.service层

/**
 * 根据角色id查询全部树形<用户设置权限>
 * @param rolesIds List<ModulesTreeNode>
 * @return
 */
List<ModulesTreeNode> selectAllTree(String rolesIds);

/**
 * 移除角色权限
 * @param roleid
 * @param moduleid
 * @return
 */
int deleteByUidAndModuleid(String roleid,String moduleid);
 
 /**
  * 分配角色权限
  * @param id
  * @param roleid
  * @param moduleid
  * @return
  */
int insertByUidAndModuleid(String id,String roleid,String moduleid);

3.serviceImpl层

@Override
public List<ModulesTreeNode> selectAllTree(String rolesIds) {
	// TODO Auto-generated method stub
	return modulesMapper.selectAllTree(rolesIds);
}

@Override
public int deleteByUidAndModuleid(String roleid, String moduleid) {
	// TODO Auto-generated method stub
	return rolesModulesMapper.deleteByUidAndModuleid(roleid, moduleid);
}

@Override
public int insertByUidAndModuleid(String id, String roleid, String moduleid) {
	// TODO Auto-generated method stub
	return rolesModulesMapper.insertByUidAndModuleid(id, roleid, moduleid);
}

4.controller层

/**
* 查询所有的权限
* 这里是查询所有的权限模块，然后给夫模块赋予false前台才可以显示树形组件
* @return List
*/
public List<ModulesTreeNode> getRolesTreeNodes(String rolesIds) {
	List<ModulesTreeNode> modulesTreeNodes = modulesService.selectAllTree(rolesIds);
	for (ModulesTreeNode modulesTreeNode : modulesTreeNodes) {
		if (modulesTreeNode.getParentid()==0) {
			modulesTreeNode.setChecked(false);
		}
	}
	return modulesTreeNodes;
}

/**
* 生成模块类型树
* @return List
*/
@RequestMapping("/GetModulesByRoleIdLayUI")
public List<ModulesTreeNode> getRolesTreeNode(String rolesIds) {
	List<ModulesTreeNode> rolesTreeList = this.getRolesTreeNodes(rolesIds);
	List<ModulesTreeNode> rolesTreeNodes = new ArrayList<ModulesTreeNode>();
	for (ModulesTreeNode rolesTreeNode : rolesTreeList) {
		if (rolesTreeNode.getParentid()==0) {
			rolesTreeNodes.add(findChildren(rolesTreeNode, rolesTreeList));
		}
	}
	return rolesTreeNodes;
}

/**
* 查找子类型
* @return List
*/
public ModulesTreeNode findChildren(ModulesTreeNode rolesTreeNode, List<ModulesTreeNode> rolesTreeList) {
	for (ModulesTreeNode item : rolesTreeList) {
		 if (rolesTreeNode.getId()==item.getParentid()) {
			 if(rolesTreeNode.getChildren()==null) {
				 rolesTreeNode.setChildren(new ArrayList<ModulesTreeNode>());
			 } 
			 rolesTreeNode.getChildren().add(findChildren(item,rolesTreeList));
		 } 
	}
	return rolesTreeNode;
}

/**
* 修改角色权限
* 首先先要根据角色id把本身的权限删除，然后在进行添加权限
* @return boolean 
*/
@RequestMapping("/SetSysRights")
@Transactional
public boolean SetSysRights(String parentIds,String rId) {
	//根据rId删除权限
	rolesModulesService.deleteByUidAndModuleid(rId,"");
	if (parentIds != null && !"".equals(parentIds) && parentIds != "") {//parentIds为空则视为取消全部权限
		int flag = 0;
		String[] m = parentIds.split(",");
		for (int i = 0; i < m.length; i++) {
			String id = UUIDUtil.getUUID();
			flag = rolesModulesService.insertByUidAndModuleid(id, rId, m[i]);
		}
		if (flag<=0) {
			return false;
		}
	}
	return true;
}

5.mapper.xml
注：我的数据库设计没有checked字段，所以我在sql里面添加了此字段并赋予boolean值

<select id="selectAllTree" resultType="modulesTreeNode">
	    SELECT
		distinct m.id,
		m. NAME title,
		m.parentid,m.weight,
		CASE
	WHEN m.id IN (
		SELECT
			moduleid
		FROM
			rolemodules
		WHERE
			roleid = #{rolesIds}
	) THEN
		'true'
	ELSE
		'false'
	END checked
	FROM
		modules m
	LEFT JOIN rolemodules rm ON m.Id = rm.moduleid
	ORDER BY
		weight DESC
</select>

<delete id="deleteByUidAndModuleid">
    delete from rolemodules
    where RoleId = #{roleid} 
    <if test="moduleid != null and moduleid != ''">
    	and ModuleId = #{moduleid}
    </if>
</delete>

<insert id="insertByUidAndModuleid">
    insert into rolemodules(Id,RoleId,ModuleId) values(#{id},#{roleid},#{moduleid})
</insert>