layui学习：数据库输出树

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

所用材料：

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回调时，就会把节点所拥有的参数都返回给你。

layui学习：数据库输出树

加载layui.code

codelayui.code

猜你喜欢