Отключить ленивую загрузку FancyTree - PullRequest
Новая
       13

Отключить ленивую загрузку FancyTree

0 голосов
/ 15 марта 2019

Мое приложение передает всю древовидную иерархию от PHP до Javascript через JSON. Нет вызовов AJAX, нет отложенной загрузки. Однако я обнаружил, что на самом деле я не могу отключить функцию отложенной загрузки метода расширения списка.

Например:

Если это json, переданный из моего PHP-скрипта: 

[{
    "title": "Southeast",
    "key": 28,
    "children": [{
        "key": 2,
        "title": "North Carolina",
        "children": [{
            "key": 68,
            "title": "Charlotte"
        }, {
            "key": 69,
            "title": "Raleigh"
        }]
    }, {
        "key": 1,
        "title": "South Carolina",
        "children": [{
            "key": 1,
            "title": "Columbia"
        }, {
            "key": 2,
            "title": "Baldwin County"
        }, {
            "key": 3,
            "title": "Barbour County"
        }, {
            "key": 4,
            "title": "Bibb County"
        }]
    }]
},
{
    "title": "Northeast",
    "key": 32,
    "children": [{
        "key": 3121,
        "title": "Albany County",
        "children": [{
            "key": 3121,
            "title": "Albany County"
        }, {
            "key": 3122,
            "title": "Big Horn County"
        }]
    }, {
        "key": 3122,
        "title": "Big Horn County"
    }]
},
{
    "title": "Midwest",
    "key": 167
},
{
    "title": "Mid-Atlantic",
    "key": 31
},
{
    "title": "Southwest",
    "key": 166
}]

И я создаю фантазийное дерево: 

$('#tree').fancytree({
    source: 'php_script.php'
    extensions: ['edit']
});

Я не могу видеть уровни второго или третьего уровня даже в DOM, пока я фактически не нажму на расширитель рядом с соответствующими родительскими уровнями (Юго-восток, Северо-восток и т. Д.). То, что я хотел бы сделать, это «увидеть» уровни в DOM (инспектор / консоль) ДО щелчка на расширителях. есть идеи как это сделать? Я предполагаю, что это связано с отложенной загрузкой, однако я пробовал следующее: 

$('#tree').fancytree({
...
lazyLoad: function(event, data) {
    return false; // I understand this is likely hack-ish, but it still didn't work
},

Или установить свойство lazy непосредственно на каждом узле без удачи: 

[{
"title": "Southeast",
"key": 28,
"lazy":false,
"children": [{
    "key": 2,
    "lazy":false,
    "title": "North Carolina",
    "children": [{
        "key": 68,
        "lazy":false,
        "title": "Charlotte"
    }, {
        "key": 69,
        "lazy":false,
        "title": "Raleigh"
    }]
}
...

Я проверил узлы, чтобы убедиться, что они на самом деле не ленивые: 

$('#tree').fancytree({
    'beforeExpand': function(event, data){
        console.log(data.node.isLazy());
    },
    'expand': function(event, data) {
        console.log(data.node.isLoaded());
    },
...

и в консоли я получаю то, что ожидал: 

false
true

Я понимаю, что если число узлов начинает становиться довольно большим, то НЕ ленивая загрузка их начнет замедлять страницу. Я также понимаю, что могу принудительно загрузить все узлы, запустив расширение на всех узлах с помощью этого: 

if(all) {
    $('#tree').fancytree('getTree').visit(function(node){
        node.setExpanded(expand);
    });
}

Но такое чувство, что должен быть более простой способ сделать это. Я хочу, чтобы весь DOM был загружен, но сразу же после создания необычного дерева. Есть мысли?

1 Ответ

2 голосов
/ 16 марта 2019

Ленивый загрузка выдаст Ajax-запрос на загрузку дочерних узлов при первом раскрытии (если родительский элемент помечен lazy).

Вы описываете ленивый рендеринг : полная модель уже загружена, но Fancytree генерирует элементы DOM по требованию.В большинстве случаев это приводит к гораздо лучшему восприятию пользователем, потому что браузеры имеют тенденцию замедляться, когда количество элементов DOM становится слишком большим.
См. Также здесь * для концепций .

Однако,Если вы хотите отобразить все узлы после загрузки, взгляните на метод node.render(): 

$("#tree").fancytree({
  source: "php_script.php",
  extensions: ["edit"]
  init: function(event, data) {
    data.tree.getRootNode().render(true, true);
  },
  ...
});
...