Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Почтовая рассылка

Подписчиков: -1
Последний выпуск: 19.06.2015

дерево

271
15 января 2008 года
MrXaK
721 / / 31.12.2002
необходимо реализовать форму в виде аналога проводника (деревом)..
только проблема в том, что на 3м уровне элементов порядка 3000..
пробовал дерево dTree 2.05 ( destroydrop.com/javascript/tree/ )
но в нём на формирование дерева из 3000 элементов уходит порядка 40с (из 2000 порядка 29с)..
есть идеи как можно написать быстро работающую реализацию такой формы?
256
15 января 2008 года
foxweb
1.0K / / 27.07.2005
Я делал такое на дипломный проект и для кучи рабочих. Само дерево хранится в mysql-таблице, довольно просто там всё. А выводится рекурсивно до 3-4 уровней в виде... В общем щас не смогу показать.

На картинке немного не тот вариант, библиотека своя используется, пара функций для генерации дерева. То же самое делается с полями ввода.
15
15 января 2008 года
shaelf
2.7K / / 04.05.2005
Есть такие слова как AJAX и кэш
256
15 января 2008 года
foxweb
1.0K / / 27.07.2005
Цитата: shaelf
Есть такие слова как AJAX и кэш



Чуть-чуть поленился, что на AJAX такое сделать. Да и не было такой сложности/необходимости. Однако задачка интересная.

337
15 января 2008 года
shine
719 / / 09.06.2006
Могу посоветовать почитать вот эту статью. Если вкратце, то разные способы создания элементов могут различаться по производительности на несколько порядков. А потом можно начинать оптимизировать dTree.
15
15 января 2008 года
shaelf
2.7K / / 04.05.2005
На самом деле там всё просто и ты за пару минут сможешь переписать это...
При нажатии на ссылку, ты вызываешь функцию, которая меняет видимость (display: (block|none), просто переписываешь на запрос к серверу и вставляешь результат в html). Хотя я в своё время решал эту задачку по другому... Тут уже нужно точно знать приоретет между сервером и скоростью загрузки/трафика. Т.к. хостинг был обычной шарой, а дерево было не маленькое (около 6000 эл, до 9 вложености), то я просто генерил при заливки/редактировании прайса новый файл с меню. Если хочется заморочится и сохранить сервер (что в общем-то здорово) и есть время, то можно заморочится на генерации каждой ноды в отдельный файл... Таким образом мы сохраним скорость загрузки (загружаться будет только то, что нужно) и не будем насиловать сервер (т.к. будет отдаваться статика)... Но на это решение потребуется немного больше времени..
256
15 января 2008 года
foxweb
1.0K / / 27.07.2005
Цитата: shine
Могу посоветовать почитать вот эту статью.



Обмен опытом - великая вещь! Спасибо, очень интересная статья.

P.S. - Что-то я сегодня много в закладки добавляю. Не менее 10 ссылок в день ;)

271
30 января 2008 года
MrXaK
721 / / 31.12.2002
возвращаюсь к вопросу.. провёл оптимизацию как по линку.. работать стал где-то вдвое быстрее, но всё равно медленно..
было установлено, что основное время тратится на проверку, имеет ли узел потомков.. при этой проверке для данного узла идёт перебор всех узлов и сравнивается pid текущего с id iго... чё можно оптимизировать?
15
30 января 2008 года
shaelf
2.7K / / 04.05.2005
Используй response cache (кеширование конечного варианта) и при изменении структуры перезаписывай.
271
15 февраля 2008 года
MrXaK
721 / / 31.12.2002
снова вопрос по этому же дереву...
надо было сделать, чтобы при выделении чекбокса выделялись все боксы нижнего уровня, а верхние выделялись или выделялись серым, если есть ещё подэлементы...
собсна вопрос, как мне при проверке вверх наиболее оптимально реализовать проверку чекнутости всех вложенных уровней...
пока у меня так.. но такой вариант не учитывает уровни, которые вложены на таком же уровне с чекнутым
Код:
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
    });
}
Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог