VPF::Создание древовидного меню - Форум программистов

knut

Дата 6.3.2008, 21:26 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 588
Регистрация: 7.2.2006

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

добрый день.
задача след. надо реализовать дерево т.е в базе xранятся есе ветки и подветки дерева надо прочитать и создать дерево и уметь
закрывать и открывать ветки нашего дерево(т.е + и -)
с созданием самого дерево я розабрался функцию закрывие и открытие веток я тоже написал но вот собрать все в месте не могу
1. функция каторая создает дерево

Код


<?
function  ShowTree($parentId,$lvl)
{
        global $link;
        global $lvl;
        $lvl++;
    
            
        $sSql = "SELECT id,title,pid FROM catalog WHERE pid = ".$parentId." ORDER BY title ";
        $resulte  = mysql_query($sSql)
        or die(mysql_error());
            
        if(mysql_num_rows($resulte) > 0 ){
            echo "<ul id=tree_".$row['id'].">\n";
            while ($row  = mysql_fetch_array($resulte)){
                $IDI = $row["id"];
                //вот сдесь реализацию открытия и закрытия  веток
                <li> <label class="text" onClick="javascript:show_hide('FirstChildren', 'FirstPlus')">
                <img src="plus.jpg" border="0" id="FirstPlus"> <?echo $row['title'] ?></label>
                </li>
                <?
                //echo("<A  HREF=\""."?ID=".$ID1."\">".$row["title"]."</A>"."  \n");    
                ShowTree($IDI,$lvl);
                $lvl--;
            }
            echo("</UL>\n");
        }
}
        mysql_query($link);

?>

<script language="javascript">
    var pluse;   pluse = new(Image);    pluse.src =  'pluse.jpg';
    var minuse;  minuse = new(Image);    minuse.src = 'minuse.jpg';
    
    function show_hide('child',img){
        var s = document.all[child].style.display;
         if (s.indexOf('none') != -1){document.all[children].style.display=''; document.all[img].src=minus.src}
         else {document.all[children].style.display='none'; document.all[img].src=plus.src}
     }
</script>

з.ы если с формулеровкой задачи у меня не получилось прошу прошение

--------------------

Цитата

Многие вещи нам непонятны не оттого, что наши понятия слабы, а оттого, что данные вещи не входят в круг наших понятий.

Sardar

Дата 7.3.2008, 02:25 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Я не понимаю, document.all по моему даже в гугле не появляется, если его специально не вбить... Уже более 5 лет как коллекция устарела и всё равно кто нибудь, да откопает... старый учебник?

Дерево надо организовывать в nested set (ищи в гугле), рекурсивно бегать с запросом на каждый узел можно расценивать как диверсия против заказчика.

14 строка, $row ещё не существует, будет notice. Рекурсивный вызов в 23 строке должен идти до "</li>".
В 18 строке onClick="javascript:show_hide('FirstChildren', 'FirstPlus')" -> onclick="show_hide(this)"
В 19 строке убери id="FirstPlus", ты ведь знаешь, что идентификатор - штука уникальная (открой словарь или спецификацию HTML если сомневаешься)

Код

var pluse;   pluse = new Image(); pluse.src = 'pluse.jpg';
var minuse;  minuse = new Image(); minuse.src = 'minuse.jpg';
    
function show_hide(label){
   var img = label.getElementsByTagName('img')[0];
   var men = label.nextSibling;
   while(men != null && men.tagName && men.tagName.toLowerCase() != 'ul')
       men = men.nextSibling;

   if(men == null) return; //если пропустили ul
   
   if(men.style.display == 'none') {
        men.style.display = 'block';
        img.src = minuse.src;
   } else {
       men.style.display = 'none';
       img.src = pluse.src;
   }
}

А вообще на таком коротком обрывке кода столько ошибок и недочётов... это ещё постараться надо... smile

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

knut

Дата 7.3.2008, 10:19 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 588
Регистрация: 7.2.2006

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

Цитата

рекурсивно бегать с запросом на каждый узел можно расценивать как диверсия против заказчика.

извини но не понял а как без рекурси то?можно пример?

--------------------

Цитата

knut

Дата 7.3.2008, 16:48 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 588
Регистрация: 7.2.2006

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

Sardar,
вот дункция для закрывания и открывание веток в дереве

Код


<script language="javascript">
var pluse;   pluse = new Image(); pluse.src = 'pluse.jpg';
var minuse;  minuse = new Image(); minuse.src = 'minuse.jpg';
    
function show_hide(label){
   var img = label.getElementsByTagName('img')[0];
   var men = label.nextSibling;
   while(men != null && men.tagName && men.tagName.toLowerCase() != 'ul')
       men = men.nextSibling;
   if(men == null) return; //если пропустили ul
   
   if(men.style.display == 'none') {
        men.style.display = 'block';
        img.src = minuse.src;
   } else {
       men.style.display = 'none';
       img.src = pluse.src;
   }
}
</script>

а вот рекурсивная функц для построения дерева.

Код


function Showtree($parentId,$lvl)
{
   
      global $link;
      global $lvl;
      $lvl++;
                     
      $sSql = "SELECT id,title,pid FROM catalog WHERE pid = ".$parentId." ORDER BY title ";
      $resulte  = mysql_query($sSql);
      
      if(mysql_num_rows($resulte) > 0 ){
         echo("<UL>\n");
         while ($row  = mysql_fetch_array($resulte)){
            $IDI = $row["id"];
            echo ("<LI>\n");
            echo("<A  HREF=\""."?ID=".$ID1."\">".$row["title"]."</A>"."  \n");   
            
            Showtree($IDI,$lvl);
            $lvl--;
         }
         echo("</UL>\n");
      }
}
   Showtree(0,0);
   mysql_query($link);

вопрос
как мне в функцие Showtree добавить
onClick="javascript:show_hide(lable) чтом он на клики плюс и минус открывал и закрывал ветки?

--------------------

Цитата

Sardar

Дата 7.3.2008, 21:29 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Цитата(knut @ 7.3.2008, 09:19

)

извини но не понял а как без рекурси то?можно пример?

Цитата(Sardar @ 7.3.2008, 01:25

)

Дерево надо организовывать в nested set (ищи в гугле)

Цитата(knut @ 7.3.2008, 15:48

)

как мне в функцие Showtree добавить onClick="javascript:show_hide(lable) чтом он на клики плюс и минус открывал и закрывал ветки?

Хорошо перечитай мой пост. Я понимаю когда участник что-то попробовал и у него не получилось. Но когда ответ игнорируется полностью, то это звучит не меньше как оскорбление smile

--------------------

knut

Дата 8.3.2008, 15:25 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 588
Регистрация: 7.2.2006

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

Цитата

Хорошо перечитай мой пост. Я понимаю когда участник что-то попробовал и у него не получилось. Но когда ответ игнорируется полностью, то это звучит не меньше как оскорбление

я не xотель вас оскорбить если это зазвучало так то прошу прошение.
теперь по теме
вот вот тот отрезок где я и xочу заставить заработать финкц.hide(lable);

Код


while ($row  = mysql_fetch_array($resulte)){
    $IDI = $row["id"];
                ?>
                <li> <label class="text" onclick="show_hide(this)">
               <img src="plus.jpg" border="0"> <?echo $row['title'] ?>
               </label>
               <?ShowTree($IDI,$lvl)?>;
               </li><?
                 $lvl--;
}
echo("</UL>\n");

oncliked не вкакую не работает

--------------------

Цитата

Sardar

Дата 8.3.2008, 21:44 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Цитата(knut @ 8.3.2008, 14:25

)

я не xотель вас оскорбить если это зазвучало так то прошу прошение.

Шучу же

Что в консоли пишет? Дай ссылку, посмотрим в дебаггере. Если JS код из этого поста, php код из этого, то ошибок быть не должно.

--------------------

knut

Дата 9.3.2008, 14:24 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 588
Регистрация: 7.2.2006

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

да функция js для открытия и закрытия веток то что и вы предложили.
но она че та не работает вначале дерево у меня рисуется в открытом виде и на клики не реагирует
т.е сама функция вызовается но работать не работает.
вот .php фаил и output (tree.jpg)

Присоединённый файл ( Кол-во скачиваний: 3 )

tree.rar 4,30 Kb

--------------------

Цитата

Sardar

Дата 9.3.2008, 15:00 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Ой, я ошибся, замени while(men != null && men.tagName && men.tagName.toLowerCase() != 'ul') на while(men != null && (!men.tagName || men.tagName.toLowerCase() != 'ul')). Оберни всё меню в общий div, добавь к стилям

Поставь всем спискам общим классом display: none. К классу самого верхнего списка добавь класс содержащий display: block, это откроет верхний уровень.

По php коду, обрати внимание на $lvl, кажется ты думал о другом эффекте.

--------------------

knut

Дата 9.3.2008, 19:17 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 588
Регистрация: 7.2.2006

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

Цитата

Оберни всё меню в общий div, добавь к стилям

....

Цитата

Поставь всем спискам общим классом display: none. К классу самого верхнего списка добавь класс содержащий display: block, это откроет верхний уровень.

т.е вы это имели виду? или я туплю?

Код


<ul style="display: none">
 <li>
     <div class ="text" onclick="show_hide(this)">
        <img src="minuse.jpg" border="0"> <?echo $row['title'] ?>
     </div>                    
    <?ShowTree($IDI,$lvl)?>
</li>
</ul>

--------------------

Цитата

Sardar

Дата 9.3.2008, 20:04 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

В итоге должно получиться похоже на это:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <style type="text/css">
            #menu ul {
                display: none;
                list-style: none;
            }

            #menu .toplevel {
                display: block;
            }
        </style>

        <script type="text/javascript">

            var pluse;   pluse = new Image(); pluse.src = 'pluse.jpg';
            var minuse;  minuse = new Image(); minuse.src = 'minuse.jpg';


            function show_hide(label) {
                var men = label.nextSibling;
                while(men != null && (!men.tagName || men.tagName.toLowerCase() != 'ul')) men = men.nextSibling;
                if(men == null) return; //если пропустили ul

                var img = label.getElementsByTagName('img')[0];
                if(men.style.display == 'none') {
                    men.style.display = 'block';
                    img.src = minuse.src;
                } else {
                    men.style.display = 'none';
                    img.src = pluse.src;
                }

            }
        </script>
    </head>
    <body>
        <div id="menu">
            <ul class="toplevel">
                <li><label class="text" onclick="show_hide(this)">
                    <img src="plus.jpg" width="10" height="10">
                    Option 1</label>

                    <ul>
                        <li><label class="text" onclick="show_hide(this)">
                            <img src="plus.jpg" width="10" height="10">
                            SubOption 1</label>

                            <ul>
                                <li><label class="text" onclick="show_hide(this)">
                                    <img src="plus.jpg" width="10" height="10">
                                    SubOption 1</label>
                                </li>
                            </ul>            
                        </li>
                    </ul>
                </li>

                <li><label class="text" onclick="show_hide(this)">
                    <img src="plus.jpg" width="10" height="10">
                    Option 1</label>
                </li>

                <li><label class="text" onclick="show_hide(this)">
                    <img src="plus.jpg" width="10" height="10">
                    Option 1</label>
                </li>

                <li><label class="text" onclick="show_hide(this)">
                    <img src="plus.jpg" width="10" height="10">
                    Option 1</label>
                </li>
            </ul>
        </div>
    </body>
</html>

--------------------

knut

Дата 9.3.2008, 20:27 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 588
Регистрация: 7.2.2006

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

Sardar,
вся проблема у меня в том что названия веток с подветками я читаю с базы .так вот в не ка не могу понять как в все это мне связать с функц. Showtree() каторая и получает названия с базы названия веток и подветок smile

--------------------

Цитата

Sardar

Дата 9.3.2008, 21:28 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

knut, подумай немного, почитай код, ведь вёрстка почти идентична твоей smile

Не могу я тебе дать готовый код для copy-paste, это окончательно убьёт в тебе программиста. В своей Showtree() ты генерил <ul>, а после <label> рекурсиный вызов. Запусти свой скрипт, построчно сравни с моей вёрсткой. Повторяй пока не найдёшь схожести и не перенесёшь мои небольшие изменения в свой код.

--------------------

knut

Дата 10.3.2008, 17:41 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 588
Регистрация: 7.2.2006

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

Sardar,
спасибо все разобрался сменя ++
но прежде чем закрыт тему еще вопрос
как добавлять и удалять ноды?

--------------------

Цитата

Sardar

Дата 10.3.2008, 18:29 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Дай твоё точное определение слову "нода", не пойму вопроса.

--------------------

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