javascript - 如何在 FuelUX 树 Bootstrap 插件中显示嵌套数据项

Question

我正在尝试实现 FuelUX 树插件，到目前为止我一直按照示例操作，但我需要一个嵌套结构。我假设树插件能够处理嵌套的子项？这是正确的吗？

  var treeDataSource = new TreeDataSource({
     data: [
        { name: 'Test Folder 1', type: 'folder', additionalParameters: { id: 'F1' },
          data: [
            { name: 'Test Sub Folder 1', type: 'folder', additionalParameters: { id: 'FF1' } },
            { name: 'Test Sub Folder 2', type: 'folder', additionalParameters: { id: 'FF2' } },
            { name: 'Test Item 2 in Folder 1', type: 'item', additionalParameters: { id: 'FI2' } }
          ]
        },
        { name: 'Test Folder 2', type: 'folder', additionalParameters: { id: 'F2' } },
        { name: 'Test Item 1', type: 'item', additionalParameters: { id: 'I1' } },
        { name: 'Test Item 2', type: 'item', additionalParameters: { id: 'I2' } }
      ],
  delay: 400
});

到目前为止，它似乎将顶级项目加载到打开的文件夹中，而不是嵌套的数据项目。这也是他们网站上的演示所做的，但这似乎不是所需的交互。谁能确认这是否是预期的行为？

任何人都可以指出我使用此插件创建嵌套数据树的代码吗？有什么很明显我错过了吗？

Answer 1

我实际上正在写一篇关于这个问题的博文。

我开发的解决方案不适合胆小的人。问题是 folder 对象不支持子数据实例化。此外，添加 child 也不是一件容易的事。我快速启动了一个 fiddle您可以选择这些内容以了解如何实现您的目标。我正在使用相同的解决方案，只是我的 addChildren 函数通过 AJAX 调用 MVC 路由并返回一个 JSON 对象以动态填充子对象。

您可以从字面上复制并粘贴我的 fiddle 中的代码并开始使用开箱即用的 addChildren 函数。