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

How to display nested data items in FuelUX tree bootstrap plugin

本文关键字：插件 显示 嵌套 数据项 FuelUX      更新时间：2023-09-26

我正试图实现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
});
到目前为止，它似乎是将顶级项加载到打开的文件夹中，而不是将嵌套的数据项加载到文件夹中。这也是他们网站上的演示所做的，但这似乎不是理想的交互。有人能确认这是预期行为吗?

谁能指出我的代码，他们已经创建了一个嵌套的数据树使用这个插件?我是不是真的遗漏了什么?

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

我开发的解决方案不适合胆小的人。问题是folder对象不支持用子数据实例化。此外，增加孩子也不是一件容易的事。我做了一个快速的小提琴，你可以从中挑选出一个如何实现你的目标的想法。我使用这个相同的解决方案，只是我的addChildren函数通过AJAX调用到MVC路由，并返回一个JSON对象来动态地填充孩子。

你可以从字面上，复制和粘贴代码从我的小提琴，并开始使用开箱即用的addChildren函数。

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

这个想法是在实例化树控件时提供dataSource，并且数据源应该具有签名(选项，回调)的data函数。data函数将在控件初始化时调用，以填充根级数据，并将在单击文件夹时再次调用。

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

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

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

继Adam的回答之后，这里有一个例子，似乎可以达到你想要的效果。

数据源的data函数可以检查是否有"子"数据通过选项传递:

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 });
        }
    }
};

在bootp演示:http://www.bootply.com/60761

相关文章：