jsTree: прогрессивный_рендер с узлами ajax / render из массива - PullRequest
Новая
       12

jsTree: прогрессивный_рендер с узлами ajax / render из массива

8 голосов
/ 23 февраля 2012

Это касается плагина jsTree jQuery .Некоторое время назад я боролся с этим, только чтобы понять, что это невозможно (изначально), поэтому я подумал о следующем решении моей проблемы ниже (которое не работает).

У меня естьдерево, которое использует плагин json_data с ajax.Как только вы откроете определенный узел, результатом с сервера будет массив из более чем 1000 узлов JSON.Ответ довольно быстрый, но сам рендеринг занимает некоторое время (пользовательский опыт заключается в том, что он получает раздражающее сообщение «скрипт не отвечает - остановить скрипт / продолжить»).

Решение, о котором я думал, было ограничение отправляемых результатоввернуться с сервера на меньшее число (скажем, 200) и использовать некоторую метку «показать больше» (или использовать событие прокрутки jQuery), чтобы получить следующие 200. Однако использование jstree.create на каждом из этих узлов выглядит оченьЗатем я заметил эту тему в группе jsTree google , в которой Иван предлагает создать все узлы одновременно с помощью функции parse_json - у меня это не работает.

Aфрагмент короткого кода того, что я пытаюсь сделать: (при нажатии на ярлык «показать больше»): 

$.ajax({
   // send data to server in order to get the relevant json back
   }(),
   success : function (r) {
           var parent_node = data.inst._get_parent(data.rslt.obj);
           var id = parent_node.attr("id");
           $("#root_tree").jstree("_parse_json", r, parent_node );
           $("#root_tree").jstree("clean_node", parent_node, false);
           }
   });

Приведенный выше пример не отображает json и добавляет дочерние элементы в родительский узел.

Я был бы очень признателен за любой другой подход или если бы кто-нибудь мог указать, что я делаю неправильно. Опять же, используя: 

$.each(r, function(i, node) {
       var id = parent_node.attr("id");
       $("#root_tree").jstree("create", "#"+id, "last", node, false, true);
});

Работает, но очень очень медленно (медленнее, чем рендеринг всех 1000 узлов вместе).

Спасибо

Ответы [ 2 ]

5 голосов
/ 30 июня 2012

Хорошо, так что мое использование было немного отключено.

То, что я закончил, это вызывал функцию в виде дерева вместо прослушивания события: 

 var ref = parent_node.attr("id");
 $.each(data, function(i, jsonNode) {
       var node = inst._parse_json(jsonNode);
       node.insertInside(ref);
 });
1 голос
/ 13 апреля 2012

Вот так у меня настроено дерево, у меня более нескольких сотен узлов, и оно работает как шарм. У меня действительно была очень небольшая проблема с производительностью в IE6 / 7, но везде она работает как чемпион. 

$('#serverTree').bind("select_node.jstree", function (e, data) {
        var url = data.rslt.obj.children("a:eq(0)").attr("href");
        if (url === "hasChild") {
            data.inst.toggle_node(data.rslt.obj);
        }
        else {
           //Do something when the leaf nodes are clicked
        }

    }).jstree({
        "themes": { "theme": "apple", "dots": false, "icons": false },
        "json_data": {
            "ajax": {
                "url": "/Home/GetNodes",
                "data": function (n) {
                    return { id: n.attr ? n.attr("id") : 0 };
                }
            }
        },
        "plugins": ["themes", "json_data", "ui"]
    });

Вот как выглядит мой JSON, возвращающийся с сервера: 

[{"data":{"title":"Node1","attr":{"id":null,"href":"hasChild"}},
 "attr":{"id":"Node1","href":null},"state":"closed"}]
...