layui 树型组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>树组件</title>
<link rel="stylesheet" href="../src/css/layui.css">
</head>
<body>
<div id="test1"></div>
<script src="../src/layui.js"></script>
<script>
layui.use('tree', function(){
var tree = layui.tree;
//渲染
var inst1 = tree.render({
elem: '#test1' //绑定元素
,data: [{
title: '江西' //一级菜单
,children: [{
title: '南昌' //二级菜单
,children: [{
title: '高新区' //三级菜单
//…… //以此类推,可无限层级
}]
}]
},{
title: '陕西' //一级菜单
,children: [{
title: '西安' //二级菜单
}]
}]
});
});
</script>
</body>
</html>
PHP读取指定目录
/*
$pathName 需要读取的目录名
*/
public function recurDir($pathName){
//将结果保存在result变量中
$result = array();
$temp = array();
//判断传入的变量是否是目录
if(!is_dir($pathName) || !is_readable($pathName)) {
return null;
}
//取出目录中的文件和子目录名,使用scandir函数
$allFiles = scandir($pathName);
//遍历他们
foreach($allFiles as $fileName) {
//判断是否是.和..
if(in_array($fileName, array('.', '..'))) {
continue;
}
//路径加文件名
$fullName = $pathName.'/'.$fileName;
//如果是目录的话就继续遍历这个目录
if(is_dir($fullName)) {
//将这个目录中的文件信息存入到数组中
$result[] = [
//指定展示名
'title' => $fileName,
// 'spread'=>true, tree组件默认展开
//循环处理
'children' => $this->recurDir($fullName)
];
}else {
//如果是文件就先存入临时变量
$temp[] = [
'filename'=>$fileName,
'fullname'=> $fullName
];
}
}
//取出文件
if($temp) {
foreach($temp as $f) {
$result[] = [
'title' => $f['filename'],
'href' => $f['fullname']
];
}
}
return $result;
}
PHP输出结果如下
[
{
"title": "用户一周播放时长比例",
"children": [
{
"title": "202008",
"children": [
{
"title": "25",
"children": [
{
"title": "141357.png",
"href": "http://ip:8080/python_png/duration/202008/25/141357.png"
},
{
"title": "141534.png",
"href": "http://ip:8080/python_png/duration/202008/25/141534.png"
},
{
"title": "141800.png",
"href": "http://ip:8080/python_png/duration/202008/25/141800.png"
},
{
"title": "141824.png",
"href": "http://ip:8080/python_png/duration/202008/25/141824.png"
}
]
}
]
}
]
},
{
"title": "用户一周点播次数比例",
"children": [
{
"title": "202008",
"children": [
{
"title": "25",
"children": [
{
"title": "115025.png",
"href": "http://ip:8080/python_png/number/202008/25/115025.png"
},
{
"title": "140318.png",
"href": "http://ip:8080/python_png/number/202008/25/140318.png"
},
{
"title": "140345.png",
"href": "http://ip:8080/python_png/number/202008/25/140345.png"
},
{
"title": "140616.png",
"href": "http://ip:8080/python_png/number/202008/25/140616.png"
},
{
"title": "141218.png",
"href": "http://ip:8080/python_png/number/202008/25/141218.png"
},
{
"title": "141247.png",
"href": "http://ip:8080/python_png/number/202008/25/141247.png"
}
]
}
]
}
]
}
]