layui.use('tree', function(){
var tree = layui.tree({
elem: '#demo' //指定元素
//,check: 'checkbox' //勾选风格
,skin: 'as' //设定皮肤
//,target: '_blank' //是否新选项卡打开(比如节点返回href才有效)
,drag: true
,click: function(item){ //点击节点回调
console.log(item)
}
,nodes: nodes //这里传入指定的nodes数据即可
});
});
[ //节点
{
name: '常用文件夹'
,id: 1
,alias: 'changyong'
,children: [
{
name: '所有未读'
,id: 11
,href: 'http://www.layui.com/'
,alias: 'weidu'
}, {
name: '置顶邮件'
,id: 12
}, {
name: '标签邮件'
,id: 13
}
]
}, {
name: '我的邮箱'
,id: 2
,spread: true
,children: [
{
name: 'QQ邮箱'
,id: 21
,spread: true
,children: [
{
name: '收件箱'
,id: 211
,children: [
{
name: '所有未读'
,id: 2111
}, {
name: '置顶邮件'
,id: 2112
}, {
name: '标签邮件'
,id: 2113
}
]
}, {
name: '已发出的邮件'
,id: 212
}, {
name: '垃圾邮件'
,id: 213
}
]
}, {
name: '阿里云邮'
,id: 22
,children: [
{
name: '收件箱'
,id: 221
}, {
name: '已发出的邮件'
,id: 222
}, {
name: '垃圾邮件'
,id: 223
}
]
}
]
}
]
格式就是子孙的节点,放到父节点的children下,那php怎么将存入数据库的数据整理成这个样子呢?第一次想到的就是利用递归完成子孙树,但是简单的递归很难加入children这个子节点。下面介绍一下,我怎么来处理:
处理数据程序 data.php
<?php
$data = [
[ 'id' => 1, 'name' => '江苏省', 'pid' => 0],
[ 'id' => 2, 'name' => '徐州市', 'pid' => 1],
[ 'id' => 3, 'name' => '睢宁县', 'pid' => 2],
[ 'id' => 4, 'name' => '双沟镇', 'pid' => 3],
[ 'id' => 5, 'name' => '王集镇', 'pid' => 3],
[ 'id' => 6, 'name' => '铜山区', 'pid' => 2],
[ 'id' => 7, 'name' => '张集镇', 'pid' => 6],
[ 'id' => 8, 'name' => '大黄山镇', 'pid' => 6],
[ 'id' => 9, 'name' => '南京市', 'pid' => 1],
[ 'id' => 10, 'name' => '江宁区', 'pid' => 9],
[ 'id' => 11, 'name' => '鼓楼区', 'pid' => 9],
[ 'id' => 12, 'name' => '浙江省', 'pid' => 0],
[ 'id' => 13, 'name' => '杭州市', 'pid' => 12],
[ 'id' => 14, 'name' => '西湖区', 'pid' => 13]
];
$res = [];
$tree = [];
//整理数组
foreach( $data as $key=>$vo ){
$res[$vo['id']] = $vo;
$res[$vo['id']]['children'] = [];
}
unset( $data );
//查询子孙
foreach( $res as $key=>$vo ){
if( $vo['pid'] != 0 ){
$res[$vo['pid']]['children'][] = &$res[$key];
}
}
//去除杂质
foreach( $res as $key=>$vo ){
if( $vo['pid'] == 0 ){
$tree[] = $vo;
}
}
unset( $res );
$tree = json_encode( $tree );
注意 33 行的 &$tree[$key] 这句话。这个是一次循环实现无限极分类的关键所在。以地址的形式操作数组。不理解的可以分开打印怎么实现的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>树模块 - layui</title>
<link rel="stylesheet" href="./layui/css/layui.css">
<style>
body{padding: 50px 100px;}
</style>
</head>
<body>
<?php require 'data.php'; ?>
<ul id="demo"></ul>
<script src="./layui/layui.js"></script>
<script>
layui.use('tree', function(){
var tree = layui.tree({
elem: '#demo' //指定元素
//,check: 'checkbox' //勾选风格
,skin: 'as' //设定皮肤
//,target: '_blank' //是否新选项卡打开(比如节点返回href才有效)
,drag: true
,click: function(item){ //点击节点回调
console.log(item)
}
,nodes: <?php echo $tree; ?>
});
});
</script>
</body>
</html>