标签搜索

layui之树形组件使用

小群
2022-02-06 / 0 评论 / 102 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2022年02月06日,已超过978天没有更新,若内容或图片失效,请留言反馈。

下载: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;
}

附件:

0

评论 (0)

取消