Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Построить дерево 
:(
    Опции темы
Ripper
Дата 13.11.2011, 19:47 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Lonely soul...
**


Профиль
Группа: Участник
Сообщений: 920
Регистрация: 30.6.2004
Где: г. Москва

Репутация: нет
Всего: 23



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

У меня есть .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. Я просто не могу сообразить как правильно прибавлять новые элементы в список =\



--------------------
"Он знает: надо смеяться над тем, что тебя мучит, иначе не сохранишь равновесия, иначе мир сведет тебя с ума" - Над кукушкиным гнездом
PM MAIL ICQ   Вверх
$дмитрий
Дата 13.11.2011, 20:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 2
Всего: 45



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

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

Код

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

PM MAIL   Вверх
Ripper
Дата 13.11.2011, 20:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Lonely soul...
**


Профиль
Группа: Участник
Сообщений: 920
Регистрация: 30.6.2004
Где: г. Москва

Репутация: нет
Всего: 23



Ну да, это я в комментарии выделил, либо
          //    $("#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 содержится дерево, и если я сделаю аппенд один раз, все будет, но как тогда повесить на каждый элемент свой онклик 


--------------------
"Он знает: надо смеяться над тем, что тебя мучит, иначе не сохранишь равновесия, иначе мир сведет тебя с ума" - Над кукушкиным гнездом
PM MAIL ICQ   Вверх
$дмитрий
Дата 13.11.2011, 20:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 2
Всего: 45



Цитата

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

Код

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


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

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

Код

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

PM MAIL   Вверх
Ripper
Дата 13.11.2011, 20:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Lonely soul...
**


Профиль
Группа: Участник
Сообщений: 920
Регистрация: 30.6.2004
Где: г. Москва

Репутация: нет
Всего: 23



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



--------------------
"Он знает: надо смеяться над тем, что тебя мучит, иначе не сохранишь равновесия, иначе мир сведет тебя с ума" - Над кукушкиным гнездом
PM MAIL ICQ   Вверх
$дмитрий
Дата 13.11.2011, 23:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 2
Всего: 45



Цитата

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

Поясни, вопрос не понятен
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Применение библиотек | Следующая тема »


 




[ Время генерации скрипта: 0.0460 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.