javascript - 用 PHP 构建文件树数组并在 VueJS 中渲染
问题描述
我正在尝试基于var treeData
来自Tree View - Vue.js的数据蓝图使用 PHP 构建一个文件树数组(在 javascript 选项卡中可见)。
var treeData = [
{
name: 'My Tree',
children: [
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
{
name: 'child folder',
children: [
{ name: 'hello' },
{ name: 'wat' }
]
},
{ name: 'hello' },
{ name: 'wat' },
{
name: 'child folder',
children: [
{ name: 'hello' },
{ name: 'wat' }
]
}
]
}
]
},
{name: 'My tree 2'}
]
我能够用以下答案构建一个树数组: PHP - create dynamic multidimensional file tree array。
但是在 Vue.js 文档中看到的格式更适合这种情况。我没有找到一种方法来构建数组而不将目录定义为键。
$fileTree = dir_tree('/xy');
return $fileTree;
function dir_tree($dir) {
$files = array_map('basename', glob("$dir/*"));
foreach($files as $file) {
if(is_dir("$dir/$file")) {
$return[$file] = dir_tree("$dir/$file");
} else {
$return[] = [
'name' => $file,
'type' => explode('.', $file)[1]
];
}
}
return $return;
}
目前导致以下数组:
{
"folder1": {
"0": {
"name": "test1.txt",
"type": "txt"
},
"child folder1": [
{
"name": "sample.png",
"type": "png"
}
]
},
"folder2": [
{
"name": "test2.txt",
"type": "txt"
}
]
}
有没有办法管理它?
解决方案
使用您在问题中提到的相同代码。并更改为所需的结构。
注意在两个结果上使用json_encode
将给出相同的输出。
function dir_tree_array($dir) {
$files = array_map('basename', glob("$dir/*"));
$return = [];
foreach($files as $file) {
if(is_dir("$dir/$file")) {
$return[] = [ "name" => $file, "children" => dir_tree("$dir/$file")];
} else {
$return[] = ["name" => $file];
}
}
return $return;
}
function dir_tree_object($dir) {
$files = array_map('basename', glob("$dir/*"));
$return = [];
foreach($files as $file) {
if(is_dir("$dir/$file")) {
$obj = new stdClass();
$obj->name = $file;
$obj->children = dir_tree("$dir/$file");
$return[] = $obj;
} else {
$obj = new stdClass();
$obj->name = $file;
$return[] = $obj;
}
}
return $return;
}
推荐阅读
- tfs - 从旧版本的 TFS 迁移到 DevOps 的替代方法?
- angular - 重复标识符只读。(属性) Constants.readonly :打字稿中的字符串
- c# - 具有外键关系的 ASP.NET Core Web API 和 EF Core 模型
- php - Codeigniter 匹配返回 false
- regex - 使用正则表达式解析损坏的 Apache 日志
- python - 如何替换Python嵌套列表中的所有值(通过函数)?
- laravel - Sequel Pro:无法使用通过自制软件安装的 mariadb 连接到“127.0.0.1”(61)上的 MySQL 服务器
- java - 在 IntelliJ 中但不在命令行上运行 JUnit 5 测试时出错
- javascript - React Hooks 异步最佳实践
- python - 使用 pd.ExcelWriter 写入后无法再打开 Excel 文件