JQuery Dynatree с 1000 флажок очень медленно
Я загружаю более 1000 узлов (включая подузлы) в Dynatree и использую флажок для каждого узла, чтобы выбрать.
Но если мы выберем все или отменим выбор всего, как в демоверсии, http://wwwendt.de/tech/dynatree/doc/sample-select.html, это будет очень медленно и браузер зависнет на 10 секунд.
Есть ли исправление?
Изменить: Дерево имеет 6-8 вложенных уровней. Каждый уровень имеет около 5-10 узлов.
Обновленный код
<a href="#" id="select-all">select all</a>
<div id="echoSelection"></div>
<div id="my-tree"></div>
$('#select-all').click(function(){
alert($("#my-tree").dynatree("getRoot").length);
$("#my-tree").dynatree("getRoot").visit(function(node){
node.select(false);
});
return false;
});
$("#my-tree").dynatree({
initAjax: {
url: 'jsonData.aspx',
data: { type: "all" }
},
checkbox: true,
selectMode: 3,
onSelect: function (select, node) {
// Display list of selected nodes
var selNodes = node.tree.getSelectedNodes();
// convert to title/key array
var selKeys = $.map(selNodes, function (node) {
return "[" + node.data.key + "]: '" + node.data.title + "'";
});
$("#echoSelection2").text(selKeys.join(", "));
},
onClick: function (node, event) {
// We should not toggle, if target was "checkbox", because this
// would result in double-toggle (i.e. no toggle)
if (node.getEventTargetType(event) == "title")
node.toggleSelect();
},
onKeydown: function (node, event) {
if (event.which == 32) {
node.toggleSelect();
return false;
}
},
fx: { height: "toggle", duration: 200 },
autoCollapse: true
});
}
Образец в формате JSON
[
{"title":"Node 1","isFolder":false,"isLazy":false,"key":"1","icon":null,"prevNode":0,"nextNode":0,"children":[{"title":"Node 6","isFolder":false,"isLazy":false,"key":"6","icon":null,"prevNode":0,"nextNode":0,"children":[],"tooltip":null,"addClass":null,"expand":false,"MetaData":null}],"tooltip":null,"expand":false,"MetaData":null},{"title":"Node 2","isFolder":false,"isLazy":false,"key":"2","icon":null,"prevNode":0,"nextNode":0,"children":[],"tooltip":null,"expand":false,"MetaData":null},{"title":"Node 3","isFolder":false,"isLazy":false,"key":"3","icon":null,"prevNode":0,"nextNode":0,"children":[],"tooltip":null,"expand":false,"MetaData":null}]
1 ответ
Вы можете попробовать ленивую загрузку, и вот пример http://www.gehbeez.com/dynatree-lazy-load-example-with-asp-net/