本文为自己学习做的一个小笔记,希望对各位初学者有用。
所用材料:
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.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
|
自定义参数 | - | 除了上述必要键外,你还可以给每条节点传入自定义参数,如:alias、id等。那么在触发click回调时,就会把节点所拥有的参数都返回给你。 |