layui之树形组件使用

下载：https://gitee.com/kevin402502/layui-authtree
演示：http://authtree.wj2015.com/
教程：https://blog.csdn.net/weixin_37933545/article/details/101037358 《layui 扩展 authtree 无限级权限控制树》

为前端页面引入layui树形组件

第一步：为权限树提供容器

注意：id="LAY-auth-tree-index" 是整颗树的容器，需要包含在 form.layui-form > div.layui-form-item > div.layui-input-block 中，否则依照 layui 的规则无法渲染多选框
添加代码：

    <div class="layui-form-item">
        <label class="layui-form-label">选择权限</label>
        <div class="layui-input-block">
            <div id="LAY-auth-tree-index"></div>
        </div>
    </div>

例子：

<form class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">角色名称</label>
        <div class="layui-input-block">
            <input class="layui-input" type="text" name="name" placeholder="请输入角色名称" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择权限</label>
        <div class="layui-input-block">
            <div id="LAY-auth-tree-index"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" type="submit" lay-submit lay-filter="LAY-auth-tree-submit">提交</button>
            <button class="layui-btn layui-btn-primary" type="reset">重置</button>
        </div>
    </div>
</form>

第二步：下载源码并引入插件

如果使用 layuiadmin,则只需要将插件(extends/authtree.js)放到 controller/下,然后 layui.use 即可,或者可以放在 lib/extend 中,只不过需要改 config.js
非 layuiadmin 初始化如下：

layui.config({
    base: 'extends/',
}).extend({
    authtree: 'authtree',
});

第三步：异步获取权限数据并渲染

render 传递的第一个参数，即为树的目标容器，这也是以后操作这颗树的重要标志
listConvert 是 authtree 提供的内置函数，可以将普通的列表数据转换为权限树需要的数据结构，如有此需求请查看该函数对应文档

layui.use(['authtree', 'form', 'layer'], function(){
    var $ = layui.$;
    var authtree = layui.authtree;
    var form = layui.form;
    var layer = layui.layer;
    // 一般来说，权限数据是异步传递过来的
    $.ajax({
        url: 'tree.json',
        dataType: 'json',
        success: function(res){
      let trees = authtree.listConvert(res.data.list, {
        primaryKey: 'id'
        ,startPid: 0
        ,parentKey: 'pid'
        ,nameKey: 'name'
        ,valueKey: 'id'
        ,checkedKey: res.data.checkedId
        ,disabledKey: res.data.disabledId
      });
      // 如果后台返回的不是树结构，请使用 authtree.listConvert 转换
      authtree.render('#LAY-auth-tree-index', trees, {
        layfilter: 'lay-check-auth',
        autowidth: true,
      });
    }
    
    //监听提交
        form.on('submit(saveBtn)', function (data) {
      let field = data.field
      field['menu_id'] = authtree.getChecked('#LAY-auth-tree-index')
      $.post('save',field,res => {
        if (res.status == 0)    return layer.msg(res.msg)
      })
      return false;
    });
});

php后台无限分类的三种方式

来自--https://blog.csdn.net/u012442504/article/details/107924836

/**
 * @Description: 无限极分类一
 * @Author: Yang
 * @param $data  数据库数据
 * @param int $parent_id   父级ID
 * @return array
 */
function getTree1($data, $parent_id = 0)
{
    $tree = array();
    foreach ($data as $k => $v) {
        if ($v["parent_id"] == $parent_id) {
            unset($data[$k]);
            if (!empty($data)) {
                $children = getTree1($data, $v["id"]);
                if (!empty($children)) {
                    $v["_child"] = $children;
                }
            }
            $tree[] = $v;
        }
    }
    return $tree;
}
 
 
/**
 * @Description: 无限极分类二
 * @Author: Yang
 * @param $data   数据库数据
 * @param int $parent_id  父级ID
 * @param int $level  等级
 * @return array
 */
function getTree2($data, $parent_id = 0, $level = 0)
{
    static $tree = array();
    foreach ($data as $k => $v) {
        if ($v["parent_id"] == $parent_id) {
            $v["level"] = $level;
            $tree[] = $v;
            getTree2($data, $v["id"], $level + 1);
        }
    }
    return $tree;
}
 
/**
 * @Description: 无限分类三：面包屑导航
 * @Author: Yang
 * @param $data  数据库数据
 * @param $id    分类ID
 * @return array
 */
function getCrumbsBar($data, $id) {
    static $tree = array();
    foreach ($data as $k => $v) {
        if ($v["id"] == $id) {
            getCrumbsBar($data, $v["parent_id"]);
            $tree[] = $v;
        }
    }
    return $tree;
}

附件：

https://blog.csdn.net/weixin_43345943/article/details/97485813 《layui后台管理系统 - 权限树表格》
https://blog.csdn.net/weixin_37933545/article/details/101037358 《layui 扩展 authtree 无限级权限控制树》
https://blog.csdn.net/u012442504/article/details/107924836 《php后台无限分类的三种方式》