关于layui默认的tree再回显时会进行级联勾选,这是个bug,已有人在社区发表讨论与建议了。目前个人采用的解决办法:是在后台判断当前角色拥有的子级id进行设置checked:true,这样在前台展示的时候它就会通过子级的id自动去级联勾选父级的id,是我们想要的展示效果。
主后台代码:
// layui 菜单权限 start
/**
* layui 的tree 方式
* @author master
*/
/**
* 获取封装方法
*
* @param myMenus 当前自身的菜单集合
* @param allMenus 所有的菜单集合
* @return
*/
public static List<LayUINode> getLayUIMenus(List<SysMenu> allMenus, List<SysMenu> myMenus) {
List<LayUINode> layUINodes = new ArrayList<>();
if (() != 0) {
LayUINode treeNode;
for (int i = 0; i < (); i++) {
if (null == (i).getParentId() || "".equals((i).getParentId())) { //封装父节点
treeNode = new LayUINode();
(((i).getId()));
((i).getName());
((i).getHref());
//(checkMenu(((i).getId()), myMenus));
(getLayChildren(allMenus, myMenus, ((i).getId())));
(treeNode);
}
}
}
return layUINodes;
}
/**
* 校验菜单是否选中
*
* @param id
* @param myMenus
* @return
*/
private static boolean checkMenu(String id, List<SysMenu> myMenus) { // 回显判断
for (int j = 0; j < (); j++) {
if ((((j).getId()))) {
return true;
}
}
return false;
}
/**
* 菜单children
*
* @param allMenus
* @param myMenus
* @param id
* @return
*/
private static List<LayUINode> getLayChildren(List<SysMenu> allMenus, List<SysMenu> myMenus, String id) {
List<LayUINode> layUINodes = new ArrayList<>();
LayUINode treeNode;
if (() != 0) {
for (int i = 0; i < (); i++) {
if (null != (i).getParentId()) {
if ((((i).getParentId()))) { // 子菜单为1标识
treeNode = new LayUINode();
(((i).getId()));
((i).getName());
((i).getHref());
if ((i).getIsButton() == 0) { // 是按钮
(checkMenu(((i).getId()), myMenus));
}
(getLayChildren(allMenus, myMenus, ((i).getId())));
(treeNode);
}
}
}
}
return layUINodes;
}
// layui 菜单权限 方式end
前台主代码:
<script src="../../../layuiadmin/layui/"></script>
<script>
let menuIds = [];
let t;
({
base: '../../../layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['index', 'form', 'tree'], function () {
let $ = layui.$
, form =
, tree = ;
({base: '../../../layuiadmin/js/layui_exts/'})
// 自定义ajax模块组件使用示例,继承自上方的base根目录属性
.use(['tokenAjax2'], function () {
let $token = layui.tokenAjax2;
let roleId = $('#roleId').val();
$token.tokenAjax2('sys/treeMenu', {'roleId':roleId}, function (data) {
if ( == 0) {
//渲染
t = ({
id: 'treeId'
,
elem: '#treeId' //绑定元素
, showCheckbox: true
, accordion: false
, data:
, oncheck: function (obj) {
}
});
// 获取选中的节点id
// getTreeId(());
//('treeId', [2]); //批量勾选 id 为 2、3 的节点
}
});
});
});
/**
* 递归获取选中菜单的id
* @type {Array}
*/
function getTreeId(node) {
if ( > 0) {
for (let i = 0; i < ; i++) {
(node[i].id);
if (node[i].children) {
getTreeId(node[i].children);
}
}
return menuIds;
}
}
/**
* 父页面调用返回数组参数
* @returns {[]}
*/
function returnMenuIds() {
menuIds = [];
// 获取选中的节点id
getTreeId(());
return menuIds;
}
</script>