用PHP构建文件树数组并在VueJS中渲染

时间:2019-03-13 09:25:52

标签: javascript php vue.js multidimensional-array

我正在尝试根据Tree View - Vue.jsvar treeData的数据蓝图,使用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"
    }
  ]
}

有办法解决吗?

1 个答案:

答案 0 :(得分:2)

使用您在问题中提到的相同代码。并更改为所需的结构。

注意在两个结果上使用var File_Id = Resources.GetIdentifier("my_file.ogg","Assets", PackageName); 会得到相同的输出。

json_encode