Question

现在我必须在同一页面上渲染很多文档，而我正在使用francytree

问题：效果

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

Answer 1

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

您将必须手动制作大量输入数据，并将它们一次分配到树中。

但是，树支持延迟加载。这更多的是树的分页。

    // get the length of the BER field in bytes
    this->ber_len = len[0] & 0b01111111;

    if(ber_len != len.size() - 1) {
        throw std::invalid_argument("len argument encoded length " + std::to_string(ber_len) + " did not match actual length " + std::to_string(len.size() - 1));
    }

    // iterate through the len vector for that many bytes
    this->len = len[1];
    for(int i = 1; i < ber_len; i++) {
        this->len <<= 8;
        this->len |= len[2+i];
    }

} else {
    // BER short form
    this->len = len[0];
}

Answer 2

Fancytree支持在父节点下对直接子代进行分页，如下所述。

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

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

来自paging tutorial：

“分页”节点是“分页”类型的状态节点，可以用作丢失数据的占位符。通常，我们会添加一些其他信息，以便以后用于加载丢失的节点。

[
  {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上可以分页吗？

2 个答案: