4

我正在尝试实现 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
});

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

谁能指出我使用此插件创建嵌套数据树的代码？有什么很明显的我想念的吗？

4

3 回答 3

2

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

我开发的解决方案不适合胆小的人。问题是folder对象不支持使用子数据进行实例化。此外，添加孩子并非易事。我旋转了一个快速的小提琴，你可以通过它来了解如何实现你的目标。我正在使用相同的解决方案，只是我的addChildren函数通过 AJAX 调用 MVC 路由并取回 JSON 对象以动态填充子级。

您可以从字面上复制并粘贴我的小提琴中的代码，然后开始使用addChildren开箱即用的功能。

于 2013-06-07T15:25:16.650 回答
1

跟进亚当的回答，这是一个似乎可以完成您想要的示例。

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

于 2013-06-15T22:42:15.793 回答
1

我很抱歉缺少这方面的文档——它肯定需要改进。

这个想法是您dataSource在实例化树控件时提供一个，并且该数据源应该具有data带有签名的函数（选项，回调）。该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调用您的函数时）以确定单击了哪个文件夹并返回该文件夹的数据。

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

于 2013-06-08T12:19:11.483 回答