TP6 + Layui实现无限极分类

丫β

已于 2022-07-14 10:21:18 修改

阅读量1k

点赞数 1

分类专栏： TP6+Layui 文章标签： layui javascript

于 2022-07-14 10:19:21 首次发布

本文链接：https://blog.csdn.net/weixin_44981396/article/details/125778194

版权

TP6+Layui 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

TP6 + Layui实现无限极分类

在做项目的时候遇到要做无限极分类的需求，查找了好久，终于找到一个最简单的写法。

数据库

在这里插入图片描述

thinkphp6 控制器方法

public function getAllData()
    {
        $data = Db :: name('auth_rule')->select()->toArray();

        $tree = getTree($data);
//        dump($tree);
        return json($tree);
    }

写在app\Common.php 中的公共方法

function getTree(array $items)
{
    $tree = []; // 格式化好的树

    /* 把数组的key跟id对应上 */
    $items_index = [];
    foreach ($items as $item) {
        $item = (array)$item;
        $item['spread'] = true;        //用于设置Layui树状组件节点展开，可忽略
        $items_index[$item['id']] = $item;
    }

    foreach ($items_index as $item) {
        if (isset($items_index[$item['pid']])) {
            $items_index[$item['pid']]['children'][] = &$items_index[$item['id']];
        } else {
            $tree[] = &$items_index[$item['id']];
        }
    }
    return $tree;
}

输出结果

在这里插入图片描述

前端Layui代码

<script>
    var $=layui.jquery;
    //获取数据的链接
    var getDataUrl = "/authRule/getAllData";
    layui.use(['tree', 'util'], function(){
        var tree = layui.tree
            ,layer = layui.layer
            ,util = layui.util
        $.ajax({
            type:'GET',
            url : getDataUrl,
            async : false,
            success:function (res) {
                data = res;
                // console.log(data)
            },
            error:function (res) {
                layer.msg('操作失败！', {icon: 2});
            }
        })
        //基本演示
        tree.render({
            elem: '#test12'
            ,data: data
            ,showCheckbox: true  //是否显示复选框
            ,id: 'demoId1'
            ,edit: ['del'] //操作节点的图标
        });
    });


</script>