是否可以在 fancytree 上分页？

Question

现在我必须在同一页面上呈现大量文档，我正在使用 francytree

问题：性能

我的想法：fancytree是否提供分页功能？

Answer 1

没有。截至 2019 年 6 月，没有 buit-in 可用的分页选项。

您将不得不通过将输入数据分块并将它们一次一个地分配给树来手动完成。

不过树支持延迟加载。这更像是一棵树的分页。

 $("#tree").fancytree({
    // Initial node data that sets 'lazy' flag on some leaf nodes
    source: [
      {title: "Child 1", key: "1", lazy: true},
      {title: "Folder 2", key: "2", folder: true, lazy: true}
    ],
    lazyLoad: function(event, data) {
      var node = data.node;
      // Issue an Ajax request to load child nodes
      data.result = {
        url: "/getBranchData",
        data: {key: node.key}
      }
    }
  });

Answer 2

Fancytree 支持父节点下的直接子节点分页，如下所述。

但是请注意，性能问题通常是由 呈现的 DOM 元素的数量 引起的，而不是由树数据模型中的节点数量引起的。

因此，将数据分散在不同的父节点下并在折叠时丢弃标记可能是一种替代方法。或者使用 ext-grid 实现视口。

来自paging tutorial:

'Paging'节点是'paging'类型的状态节点，可以作为缺失数据的占位符。通常我们会添加一些额外的信息，稍后我们可以使用这些信息来加载缺失的节点。

[
  {title: "Item 1", key: "node1"},
  {title: "Folder 2", folder: true, expanded: true, key: "node2"},
  {title: "Lazy error", key: "node3", lazy: true},
  {title: "Lazy empty", key: "node4", lazy: true},
  {title: "Lazy paging", key: "node5", lazy: true},
  {title: "More...", statusNodeType: "paging", icon: false, url: "get_children?parent=4321&start=5&count=10"}
]

也可以使用 API 创建分页节点，例如在 loadChildren 事件中：

  data.node.addPagingNode({
    title: "More...",
    url: "get_children?parent=4321&start=5&count=10"
  });

分页节点生成特殊事件而不是普通激活。一个常见的实现会发出加载请求并将 'More...' 条目替换为结果：

$("#tree").fancytree({
  ...
  clickPaging: function(event, data) {
    data.node.replaceWith({url: data.node.data.url}).done(function(){
      // The paging node was replaced with the next bunch of entries.
    });
  }

是否可以在 fancytree 上分页？

Is it possible to pagination on fancytree?

javascript

jquery

pagination

fancytree