layui学习：数据库输出树

最新推荐文章于 2025-04-10 16:42:47 发布

lugr_shx

最新推荐文章于 2025-04-10 16:42:47 发布

阅读量2.3k

点赞数

文章标签： layui

本文链接：https://blog.youkuaiyun.com/lugr_shx/article/details/80460159

版权

这篇博客介绍了如何在ThinkPHP5（TP5）框架下利用layui库从mysql数据库生成树形结构。首先创建了laytree表，包含id、name、pid、path、spread、children和href等字段，然后详细阐述了控制器和视图的代码实现，最后引用了layui官方文档中的tree组件用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文为自己学习做的一个小笔记，希望对各位初学者有用。

所用材料：

1、TP5框架

2、mysql

3、layui

第一步：创建数据库 laytree表

数据库字段介绍如下：

1、id：这个不用说了，索引字段

2、name：node名称

3、pid：父id （根字段的父id设置为0）

4、path：我这里放的是路径格式是“1-2-n”表示 id的继承关系

5、spread：boolean类型，node的打开或者关闭状态

6、children：子节点的存放处，数据表中都为空

7、href：连接地址

第二步：控制器代码：

namespace app\index\controller;
use  think\Controller;
use  think\Db;
class Index extends Controller
{
    public function index()
    {
    	$result=array();
        $result=$this->bulid_tree(0); //从pid为0开始查找
        $r=json_encode($result);
   	$this->assign('r',$r);
   	return view();
    }
    //创建树 tree（递归）
    function bulid_tree($root_id){
        $rows=db('laytree')->select();
        $childs=$this->findChild($rows,$root_id);
        if(empty($childs)){
            return null;
        }
        foreach($childs as $k => $v){
            $resultTree=$this->bulid_tree($v['id']);
            if(null != $resultTree){
                $childs[$k]['children']=$resultTree;
                
            }

        }
        return $childs;
    }
    function findChild(&$arr,$id){
        $childs=array();
        foreach($arr as $k => $v){
            if($v['pid']==$id){
                 $childs[]=$v;
            }
            
        }
        return $childs;
    }
}

第三步：视图代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	 <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
<ul id="demo"></ul>
<script src="/static/layui/layui.js" charset="utf-8"></script>
<script>
layui.use('tree', function(){
  layui.tree({
    elem:"#demo",
    nodes:{$r}
  });
});
</script>
</body>
</html>

=================分割线==========================

layui官方文档解释：

核心方法

语法：layui.tree(options)

加载layui.code

layui.use('tree', function(){
layui.tree(options);
});

options是一个对象参数，可支持的key如下表

参数	类型	描述
elem	string	指定元素的选择器
skin	string	风格定义
click	Function	点击节点的回调，详细介绍见下文
href	string	节点链接（可选），未设则不会跳转
target	string	节点打开方式（即a的target值），必须href设定后才有效
nodes	object	节点数据，详细格式见下表

节点数据格式

参数nodes是整个树形菜单渲染的关键，其所接受的格式如下

参数	类型	描述
name	string	节点名称
spread	boolean	是否展开状态（默认false）
href	string	节点链接（可选），未设则不会跳转
children	object	同nodes节点，可无限延伸。如： codelayui.code children: [{ name: '子节点' ,spread: true //展开 ,children: [{ name: '子子节点' ,children: [……] }] }, {……}]
自定义参数	-	除了上述必要键外，你还可以给每条节点传入自定义参数，如：alias、id等。那么在触发click回调时，就会把节点所拥有的参数都返回给你。