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对象不支持使用子数据进行实例化。此外，添加孩子并非易事。我快速启动fiddle，你可以通过它来了解如何实现目标。我正在使用同样的解决方案，只是我的addChildren函数通过AJAX调用MVC路由并获取一个JSON对象来动态填充子节点。

您可以从我的fiddle字面上复制并粘贴代码，然后开始使用addChildren功能。

Answer 2

我很抱歉缺乏关于此的文档 - 它肯定需要改进。

我们的想法是在实例化树控件时提供dataSource，并且该数据源应具有带签名的data函数（选项，回调）。将在控制init上调用data函数来填充根级别数据，并且在单击文件夹时将再次调用该函数。

data函数的工作是查看选项参数，该参数是从点击的文件夹上的jQuery.data()填充的，并使用该文件夹的数据进行响应。特殊情况是初始根文件夹数据，其中的选项是从控件的根div上的任何jQuery.data（）填充的，可能存在也可能不存在。

文件夹上的jQuery.data（）是从data函数回调中提供的对象数组中填充的。您可以在此示例中看到https://github.com/ExactTarget/fuelux/blob/master/index.html#L184-L189有一个名为additionalParameters的属性，但实际上您可以提供超出所需name和type的任何其他属性供您稍后使用（下次调用data函数时）确定单击了哪个文件夹并返回该文件夹的数据。

我们当前的示例为每个文件夹返回相同的静态数据，这不是最好的示例，因此我希望通过自己创建教程或链接到一个如果有人打败我来改善这种情况。

Answer 3

跟随亚当的回答，这是一个似乎可以实现你想要的例子。

DataSource的数据函数可以检查是否有通过选项传递的“子”数据：

DataSource.prototype = {

    columns: function () {
        return this._columns;
    },

    data: function (options, callback) {

        var self = this;
        if (options.search) {
            callback({ data: self._data, start: start, end: end, count: count, pages: pages, page: page });
        } else if (options.data) {
            callback({ data: options.data, start: 0, end: 0, count: 0, pages: 0, page: 0 });
        } else {
            callback({ data: self._data, start: 0, end: 0, count: 0, pages: 0, page: 0 });
        }
    }
};

Bootply演示：http://www.bootply.com/60761

如何在FuelUX树引导程序插件中显示嵌套数据项

3 个答案: