Layui Tree无限添加子级问题及如何设置根目录不可删除

在使用layui框架开发项目过程中遇到一个棘手问题，当使用layui.tree来展示子级关系时，layui.tree自带非常简便易用的add和del操作，但子级又可以添加子级，子级又添加子级……这可是我承受不了的。因此就需要限制子级的权限（孙子不能生重孙），但layui当前版本并不支持我的需求，所以只能自己对它下手了（滑稽）。

先看一下我遇到的问题，我添加了五级目录，如果根节点是父级，那么，现在重孙的……（泛滥）

我需要限制只能添加三级目录，不允许用户无限增加。

首先看一下源码（tree.js）

我们需要在属性里增加两条属性，注意是增加，tree中原本是没有该属性的。

limitNodeAddLevel: 0, 
limitNodeDelLevel: 0,

然后找到操作图标这里加上判断条件，分别为

1、当节点的层级达到limitNodeAddLevel级后不允许增加操作。

2、当节点的层级等于limitNodeDelLevel级后不允许删除操作。

if (t.limitNodeAddLevel > 0 && r.rank >= t.limitNodeAddLevel) {
    var e = {
        update: '<i class="layui-icon layui-icon-edit" data-type="update"></i>',
        del: '<i class="layui-icon layui-icon-delete" data-type="del"></i>'
    }, i = ['<div class="layui-btn-group layui-tree-btnGroup">'];
}


if (t.limitNodeDelLevel > 0 && r.rank == t.limitNodeDelLevel) {
    var e = {
        add: '<i class="layui-icon layui-icon-add-1"  data-type="add"></i>',
        update: '<i class="layui-icon layui-icon-edit" data-type="update"></i>'
    }, i = ['<div class="layui-btn-group layui-tree-btnGroup">'];
}

需要注意，这个r.rank的rank属性是树的数据结构里我们后台传过来的，表示节点的等级是几级节点，这样可以自定义自己需要的树操作限制。（r是树的完整数据结构）

以上两处修改完成后，就可以使用我们自定义的属性对layui.tree进行修饰了。

为了方便演示，这里1级菜单是在初始化tree的时候默认加上的，可见 data中有属性：“rank：1”，而children中的treeData则是在后台进行组织的，每一级分别给与不同的rank。

上效果：

本文修改tree.js是精简版，与源码在命名上有些许不同，例如：

（1）r：item

（2）t：options

（3）e：editIcon

更多关于Layui相关，请访问layui官网。