Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Применение библиотек > Построить дерево

Автор: Ripper 13.11.2011, 19:47

Вечер добрый.

У меня есть .php скрипт который выдает мне инфу в json формате. Исходя из этой инфы я хочу построить дерево вида
<ul>
....<li>
........<ul>
..........<li></li>
и т.д.

Я вроде написал на пхп ф-ию, которая делает то что нужно, но мне нужно её в jQuery написать, т.к. для каждого элемента я хочу повесить onClick.
Суть в том, что, в пхп я просто вывожу через echo нужные мне элементы, а в js .append работает по другому. В комментариях я закоментил переменную tree. Если просто понапихать в переменную все подряд, то дерево строится но так не получится привязать обработчики.
Вот то что получилось:

Код


                    //Функция которая должна в #treeList построить дерево
            function BuildTree(data) {
                $("#treeList").append("<ul>");
                //tree += "<ul>";
                for(var key in data) {
                    $("#treeList").append("<li>" + key);
                    //tree += "<li>" + key;
                    if(data[key] instanceof Array || data[key] instanceof Object) {
                        BuildTree(data[key]);
                    }
                    $("#treeList").append("</li>");
                    //tree += "</li>";
                }
                $("#treeList").append("</ul>");
                //tree += "</ul>";
            } 

// Здесь вызывается скрипт который возвращает данные 
            $.ajax({
                url: "getFiles.php",
                contentType: "application/json; charset=utf-8",
                async: false, 
                dataType: "json", 
                success: function (json) {
                    var data = eval(json);
                    BuildTree(data);
                //    $("#treeList").html(tree);
                }
            });

Вот если просто заменить html переменной tree, то дерево построится но толку нет. Мне нужно на каждый элемент будет повесить onClick. Я просто не могу сообразить как правильно прибавлять новые элементы в список =\

Автор: $дмитрий 13.11.2011, 20:00

Используешь append совершенно не правильно
Нужно в переменную сформировать дерево, а в конце один раз вызвать $("#treeList").append(tree);

Цитата

Мне нужно на каждый элемент будет повесить onClick

Код


$("#treeList li").click(function(){
    alert('test');
});

Автор: Ripper 13.11.2011, 20:32

Ну да, это я в комментарии выделил, либо
// $("#treeList").html(tree);
либо аппендом.

Но мне нужно еще на этапе формирования дерева на каждый элемент повесить onClick. Ну или даже так, на самом деле рядом с каждой надписью должно быть несколько кнопок, и мне нужно будет их дифференцировать. Т.е. например

-Запись 1 (кнопка1, кнопка2, кнопка3)
...-Запись 1.1. (кнопка 1, кнопка 2, кнопка 3, кнопка 4)

Код


           function BuildTree(data) {
                tree += "<ul>";
                for(var key in data) {
                    tree += "<li>" + key;
                    if(data[key] instanceof Array || data[key] instanceof Object) {
                        BuildTree(data[key]);
                    }
                    //Здесь что то вроде .onClick (function() { handleOnClick(data[key]); });
                    tree += "</li>";
                }
                tree += "</ul>";
            }

Вот тут в tree содержится дерево, и если я сделаю аппенд один раз, все будет, но как тогда повесить на каждый элемент свой онклик

Автор: $дмитрий 13.11.2011, 20:36

Цитата

Но мне нужно еще на этапе формирования дерева на каждый элемент повесить onClick

Код


tree += '<li onclick="alert(1)">';

Добавлено через 3 минуты и 55 секунд

Цитата

Ну или даже так, на самом деле рядом с каждой надписью должно быть несколько кнопок

Код


tree += '<li><div onclick="handleOnClick('+data[key]+');">Кнопка 1</div>';

Автор: Ripper 13.11.2011, 20:50

Я просто хотел другим способом, когда непосредственно элементу вешается onclick: $("#element").onclick();
Ну так тоже можно, единственное я не понимаю почему это работает только в случае если ф-ия handleOnClick находится за пределами $(function() {..})

Автор: $дмитрий 13.11.2011, 23:49

Цитата

я не понимаю почему это работает только в случае если ф-ия handleOnClick находится за пределами $(function() {..})

Поясни, вопрос не понятен