如何在HTML TreeView中加载文件夹文件并显示文件创建日期与扩展名？

嘿，我来帮你搞定这个需求！看你的示例代码应该是在用jstree做HTML TreeView对吧？要展示文件夹、文件，还要带上文件的创建日期和扩展名，其实可以分成后端数据准备和前端jstree渲染配置两个核心部分，下面一步步来拆解：

首先得获取目标目录下所有文件夹和文件的完整信息（包括文件名、类型、创建日期、扩展名），然后把这些数据转换成jstree能识别的JSON结构，最后通过jstree的配置渲染出带样式的树形结构。

如果是读取服务器或本地目录的真实文件，用后端语言读取文件系统的元数据是最靠谱的。比如用Node.js的fs模块递归遍历目录：

const fs = require('fs').promises;
const path = require('path');

// 递归生成目录树结构
async function buildDirectoryTree(dirPath) {
  const items = await fs.readdir(dirPath, { withFileTypes: true });
  const treeNodes = [];

  for (const item of items) {
    const fullItemPath = path.join(dirPath, item.name);
    const itemStats = await fs.stat(fullItemPath);
    
    const node = {
      text: item.name,
      type: item.isDirectory() ? 'folder' : 'file',
      // 文件夹递归生成子节点，文件则为空数组
      children: item.isDirectory() ? await buildDirectoryTree(fullItemPath) : []
    };

    // 给文件节点补充创建日期和扩展名信息
    if (!item.isDirectory()) {
      const fileExtension = path.extname(item.name).slice(1); // 去掉前缀"."，比如从".txt"得到"txt"
      // 格式化创建日期为你需要的格式，这里转成dd_mm_yyyy
      const formattedCreateDate = itemStats.birthtime.toLocaleDateString().replace(/\//g, '_');
      // 把信息拼接到节点文本中
      node.text = `${item.name} - Created Date: ${formattedCreateDate} | Extension: ${fileExtension}`;
    }

    treeNodes.push(node);
  }

  return treeNodes;
}

// 调用示例：读取当前目录的树结构，可通过接口返回给前端
buildDirectoryTree('./')
  .then(tree => console.log(JSON.stringify(tree)))
  .catch(err => console.error('读取目录失败:', err));

先引入jstree的依赖（CSS和JS），然后把后端返回的JSON数据传给jstree初始化，同时配置文件和文件夹的图标区分：

<!-- 引入jstree依赖 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

<!-- 树形结构容器 -->
<div id="file-folder-tree"></div>

<script>
// 假设后端接口返回的树结构数据存在treeData变量中（可通过AJAX请求获取）
const treeData = [
  {
    "text": "Main Folder",
    "type": "folder",
    "children": [
      {
        "text": "Folder 1",
        "type": "folder",
        "opened": true,
        "children": [
          {
            "text": "File1.txt - Created Date: 03_04_2018 | Extension: txt",
            "type": "file"
          },
          {
            "text": "File2.jpg - Created Date: 03_04_2018 | Extension: jpg",
            "type": "file"
          }
        ]
      }
    ]
  }
];

// 初始化jstree
$('#file-folder-tree').jstree({
  'core': {
    'data': treeData,
    'themes': {
      'icons': true // 显示文件夹和文件的图标
    }
  },
  // 配置文件夹和文件的图标区分
  'types': {
    'folder': {
      'icon': 'glyphicon glyphicon-folder-open' // 用bootstrap图标做文件夹图标
    },
    'file': {
      'icon': 'glyphicon glyphicon-file' // 用bootstrap图标做文件图标
    }
  },
  'plugins': ['types'] // 启用types插件来应用图标配置
});
</script>

要是你只是做静态Demo，直接写死JSON数据就行，还可以用data属性存储元数据，再通过自定义模板渲染：

$('#file-folder-tree').jstree({
  'core': {
    'data': [
      {
        "text": "Main Folder",
        "type": "folder",
        "children": [
          {
            "text": "Folder 1",
            "type": "folder",
            "opened": true,
            "children": [
              {
                "text": "File1.txt",
                "type": "file",
                "data": {
                  "createDate": "03_04_2018",
                  "extension": "txt"
                }
              }
            ]
          }
        ]
      }
    ]
  },
  'types': { /* 同上图标配置 */ },
  'plugins': ['types'],
  // 自定义文件节点的渲染模板
  'templates': {
    'file': function(node) {
      return `${node.text} - Created Date: ${node.data.createDate} | Extension: ${node.data.extension}`;
    }
  }
});

• 日期格式调整：可以用moment.js或原生Date方法把日期转成你需要的格式，比如YYYY-MM-DD或者其他自定义格式。
• 异步加载：如果目录很大，不想一次性加载所有内容，可以配置jstree的异步加载，点击文件夹时再请求后端获取子节点数据。
• 其他后端语言：如果用Python、Java等语言，对应的文件元数据获取方式不同，比如Python用os.path.getctime()，Java用Files.readAttributes()，按需调整即可。

内容的提问来源于stack exchange，提问作者Yücel Aydın