dTree.prototype.check = function(dch, dchim, nodeId) {
var tmpNode;
var newdch;
var newdchim;
for (var n=0; n<this.aNodes.length; n++) {
tmpNode = this.aNodes[n];
newdch = document.getElementById('dch'+tmpNode.id);
newdchim = document.getElementById('dchim'+tmpNode.id);
if (tmpNode.pid == nodeId) {
newdch.checked = dch.checked;
newdchim.src = dchim.src;
if (tmpNode._hc) {
this.check(newdch, newdchim, tmpNode.id);
}
}
}
}
dTree.prototype.checkLast = function(dch, nodeId, pids) {
//var dch = document.getElementById('dch'+nodeId);
var pid = pids.pids[0];
var tmpNode;
var status = (dch.checked) ? this.icon.iconCheckAll : this.icon.iconUnCheckAll;
for (var n=0; n<this.aNodes.length; n++) {
tmpNode = this.aNodes[n];
if (tmpNode.pid == pid &&
(document.getElementById('dch'+tmpNode.id).checked != dch.checked)
) {
status = this.icon.iconCheckGray;
}
}
for (var n = 0; n < pids.pids.length-1; n++) {
//document.getElementById('dchim'+pids.pids[n]).src = status;
(pids.pidsDchim[n]).src = status;
if (status != this.icon.iconUnCheckAll)
(pids.pidsDch[n]).checked = true;
else
(pids.pidsDch[n]).checked = false;
}
}
dTree.prototype.setCheck = function (nodeId, isLast) {
var dch = document.getElementById('dch'+nodeId);
var dchim = document.getElementById('dchim'+nodeId);
if (!dch.checked) {
dch.checked = true;
dchim.src = this.icon.iconCheckAll;
} else {
dch.checked = false;
dchim.src = this.icon.iconUnCheckAll;
}
//alert(this.getParentChecks(nodeId));
//alert(this.getParentChecks(nodeId).pids);
if (!isLast)
this.check(dch, dchim, nodeId);
this.checkLast(dch, nodeId, this.getParentChecks(nodeId));
}
dTree.prototype.getParentChecks = function (nodeId) {
//var dch = document.getElementById('dch'+nodeId);
//var dchim = document.getElementById('dchim'+nodeId);
var sid = nodeId;
//var pid = -2;
var _pids = []; // иды парентов
var _pidsDch = [];
var _pidsDchim = [];
var tmpNode;
for (var n=0; n<this.aNodes.length; n++) {
tmpNode = this.aNodes[n];
// ищем родителя.. родитель предыдущего уровня всегда один
if (tmpNode.id == sid) {
sid = tmpNode.pid;
//sid = pid;
_pids.push(sid);
_pidsDch.push(document.getElementById('dch'+sid));
_pidsDchim.push(document.getElementById('dchim'+sid));
n = 0;
}
}
return ({
pids : _pids,
pidsDch : _pidsDch,
pidsDchim : _pidsDchim
});
}
дерево
только проблема в том, что на 3м уровне элементов порядка 3000..
пробовал дерево dTree 2.05 ( destroydrop.com/javascript/tree/ )
но в нём на формирование дерева из 3000 элементов уходит порядка 40с (из 2000 порядка 29с)..
есть идеи как можно написать быстро работающую реализацию такой формы?
На картинке немного не тот вариант, библиотека своя используется, пара функций для генерации дерева. То же самое делается с полями ввода.
Есть такие слова как AJAX и кэш
Цитата: shaelf
Есть такие слова как AJAX и кэш
Чуть-чуть поленился, что на AJAX такое сделать. Да и не было такой сложности/необходимости. Однако задачка интересная.
статью. Если вкратце, то разные способы создания элементов могут различаться по производительности на несколько порядков. А потом можно начинать оптимизировать dTree.
Могу посоветовать почитать вот эту
При нажатии на ссылку, ты вызываешь функцию, которая меняет видимость (display: (block|none), просто переписываешь на запрос к серверу и вставляешь результат в html). Хотя я в своё время решал эту задачку по другому... Тут уже нужно точно знать приоретет между сервером и скоростью загрузки/трафика. Т.к. хостинг был обычной шарой, а дерево было не маленькое (около 6000 эл, до 9 вложености), то я просто генерил при заливки/редактировании прайса новый файл с меню. Если хочется заморочится и сохранить сервер (что в общем-то здорово) и есть время, то можно заморочится на генерации каждой ноды в отдельный файл... Таким образом мы сохраним скорость загрузки (загружаться будет только то, что нужно) и не будем насиловать сервер (т.к. будет отдаваться статика)... Но на это решение потребуется немного больше времени..
Обмен опытом - великая вещь! Спасибо, очень интересная статья.
P.S. - Что-то я сегодня много в закладки добавляю. Не менее 10 ссылок в день ;)
было установлено, что основное время тратится на проверку, имеет ли узел потомков.. при этой проверке для данного узла идёт перебор всех узлов и сравнивается pid текущего с id iго... чё можно оптимизировать?
Используй response cache (кеширование конечного варианта) и при изменении структуры перезаписывай.
надо было сделать, чтобы при выделении чекбокса выделялись все боксы нижнего уровня, а верхние выделялись или выделялись серым, если есть ещё подэлементы...
собсна вопрос, как мне при проверке вверх наиболее оптимально реализовать проверку чекнутости всех вложенных уровней...
пока у меня так.. но такой вариант не учитывает уровни, которые вложены на таком же уровне с чекнутым
Код: