Можно ли сделать пагинацию на фантазийном дереве? - PullRequest
Новая
       38

Можно ли сделать пагинацию на фантазийном дереве?

1 голос
/ 24 июня 2019

Сейчас мне нужно отрисовать много документов на одной странице, и я использую francytree

Выпуск: Производительность

МОЕ МЫШЛЕНИЕ: fancytree обеспечивает функциональность нумерации страниц или нет?

Ответы [ 2 ]

2 голосов
/ 24 июня 2019

Нет.По состоянию на июнь 2019 года нет возможности встроенной разбивки на страницы.

Вам придется делать это вручную, создавая куски входных данных и назначая их дереву по одному.

Однако дерево поддерживает ленивую загрузку.Это больше для нумерации деревьев. 

 $("#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}
      }
    }
  });
1 голос
/ 27 июня 2019

Fancytree поддерживает разбиение на страницы прямых потомков под родительским узлом, как описано ниже.

Обратите внимание, что часто проблемы с производительностью возникают из-за количества визуализированных элементов DOM , а не из числа узлов внутри модели данных дерева.

Таким образом, это может быть альтернативой распределению данных по разным родительским узлам и отмене разметки при сжатии. Или используйте ext-grid для реализации области просмотра.

Из руководства по подкачке :

Узлы «Пейджинг» являются узлами состояния типа «Пейджинг» и могут служить заполнителями для пропущенных данных. Обычно мы добавляем некоторую дополнительную информацию, которую мы можем использовать позже для загрузки отсутствующих узлов. 

[
  {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"
  });

Узлы подкачки генерируют специальные события вместо простой активации. Обычная реализация выдаст запрос на загрузку и заменит запись «Еще ...» с результатом: 

$("#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.
    });
  }
...