ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как привильнее сделать дерево
12 сообщений из 12, страница 1 из 1
Как привильнее сделать дерево
    #34023995
Фотография Damnedest
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Damnedest
Участник
Есть спиок документов (папки и просто файлы)

Задача состоит в том, чтобы вывести это дерево на HTML.

Должна бать возможность открывать и скрывать содержимое папки.

С помощью PHP передается JS массив, в котором есть все дерево. С помощью этого массива можно легко построить дерево, вопрос в том, как правильнее...

У меня два варианта, которые сразу приходят в голову:

1. С помощью таблицы
Код: plaintext
1.
2.
...
<tr><td>+</td><td>Элемент с содержимым</td></tr>
...

Тут никаких проблем нету. Мне не нравится только то, что страница будет слишком сильно перегружена HTML тегами и таблицами

2. С помощь списков
Код: plaintext
1.
2.
3.
4.
5.
...
<li>Элемент  1 
  <ul>
    <li>Элемент  2 </li>
  </ul>
...

Этот вариант мне нравится намного больше в плане простоты реализации, НО мне надо, чтобы при клике на названии документа открывался документ, а при клике на "+" открывалось содержимое папки.
Можно ли это тут реализовать...

P.S. Вопрос, как правильно реализовать древовидную структуру с учетом вложенностей и, чтобы при нажатии на иконку "+" рядом с документом открывались вложенные в него документы
...
Рейтинг: 0 / 0
30.09.2006, 14:49
| Ответить | Цитировать | Написать  
Как привильнее сделать дерево
    #34024013
Anjey aka PM
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Anjey aka PM
Участник
в даном случае списком однозначно + немного работы с CSS и все будет выглядеть довольно таки прилично...

вот пример (правда это дерево не разворачивается):

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
<ul class="tree">
  <li class="root"><b> 22 </b>: Tue  17 -Jan- 2006   15 : 41 : 54 
    <ul class="tree">
      <li><a href="295.html"> 4533353 </a>: Tue  17 -Jan- 2006   15 : 47 : 22 </li><li><a href="549.html">
        Re:  22 </a>: Tue  21 -Feb- 2006   09 : 51 : 12 </li><li><a href="550.html">Re:  22 </a>: Tue  21 -Feb- 2006 
           10 : 02 : 27 
          <ul class="tree">
            <li class="last"><a href="551.html">Re: Re:  22 </a>: Tue  21 -Feb- 2006   10 : 05 : 41 
              <ul class="tree">
                <li class="last"><a href="552.html">Re[ 3 ]:  22 </a>: Tue  21 -Feb- 2006   10 : 23 : 14 
                  <ul class="tree">
                    <li class="last"><a href="553.html">Re: Re[ 3 ]:  22 </a>: Tue  21 -Feb- 2006   10 : 26 : 32 
                      <ul class="tree">
                        <li class="last"><a href="555.html">Re[ 5 ]:  22 </a>: Tue  21 -Feb- 2006   10 : 32 : 25 
                          <ul class="tree">
                            <li class="last"><a href="557.html">Re: Re[ 5 ]:  22 </a>: Tue  21 -Feb- 2006   11 : 39 : 43 </li></ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      <li><a href="554.html">Re:  22 </a>: Tue  21 -Feb- 2006   10 : 30 : 45 
        <ul class="tree">
          <li class="last"><a href="576.html">Re: Re:  22 </a>: Thu  23 -Feb- 2006   16 : 56 : 06 </li></ul>
      </li>
      <li><a href="556.html">Re:  22 </a>: Tue  21 -Feb- 2006   10 : 46 : 25 </li><li><a href="558.html">
        Re:  22 </a>: Wed  22 -Feb- 2006   10 : 47 : 55 
        <ul class="tree">
          <li><a href="559.html">Re: Re:  22 </a>: Wed  22 -Feb- 2006   10 : 50 : 53 </li><li><a href="560.html">
            Re: Re:  22 </a>: Wed  22 -Feb- 2006   14 : 30 : 23 
            <ul class="tree">
              <li class="last"><a href="585.html">Re: Re: Re:  22 </a>: Fri  24 -Feb- 2006   10 : 35 : 01 </li></ul>
          </li>
          <li class="last"><a href="561.html">Re: Re:  22 </a>: Wed  22 -Feb- 2006   14 : 36 : 55 
            <ul class="tree">
              <li class="last"><a href="562.html">Re[ 3 ]:  22 </a>: Wed  22 -Feb- 2006   15 : 17 : 32 
                <ul class="tree">
                  <li class="last"><a href="563.html">Re: Re[ 3 ]:  22 </a>: Wed  22 -Feb- 2006   15 : 21 : 56 
                    <ul class="tree">
                      <li class="last"><a href="564.html">Re: Re: Re[ 3 ]:  22 </a>: Wed  22 -Feb- 2006   15 : 22 : 41 </li></ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="565.html">Re:  22 </a>: Wed  22 -Feb- 2006   16 : 10 : 00 
        <ul class="tree">
          <li class="last"><a href="568.html">Re: Re:  22 </a>: Thu  23 -Feb- 2006   09 : 46 : 02 
            <ul class="tree">
              <li class="last"><a href="569.html">Re: Re: Re:  22 </a>: Thu  23 -Feb- 2006   10 : 06 : 40 
                <ul class="tree">
                  <li class="last"><a href="572.html">Re: Re: Re: Re:  22 </a>: Thu  23 -Feb- 2006   16 : 09 : 21 </li></ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="570.html">Re:  22 </a>: Thu  23 -Feb- 2006   10 : 54 : 04 
        <ul class="tree">
          <li class="last"><a href="587.html">Re: Re: Re: Re: Re[ 2 ]:  22 </a>: Fri  24 -Feb- 2006 
             10 : 41 : 43 </li></ul>
      </li>
      <li><a href="571.html">Re[ 2 ]:  22 </a>: Thu  23 -Feb- 2006   11 : 00 : 21 </li><li><a href="592.html">
        Re:  22 </a>: Fri  24 -Feb- 2006   14 : 16 : 36 </li><li class="last"><a href="594.html">Re:  22 </a>:
          Sat  25 -Feb- 2006   09 : 09 : 13 </li></ul>
  </li>
</ul>

как выглядит можна глянуть на картинке
...
Рейтинг: 0 / 0
30.09.2006, 15:07
| Ответить | Цитировать | Написать  
Как привильнее сделать дерево
    #34024146
Фотография Damnedest
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Damnedest
Участник
А как отлавливать нажатие мыши по этому плюсику, чтобы открывать содержимое папки?
...
Рейтинг: 0 / 0
30.09.2006, 18:18
| Ответить | Цитировать | Написать  
Как привильнее сделать дерево
    #34024285
Anjey aka PM
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Anjey aka PM
Участник
а плюсик должен быть картинкой как часть текста элемента списка
...
Рейтинг: 0 / 0
30.09.2006, 22:59
| Ответить | Цитировать | Написать  
Как привильнее сделать дерево
    #34024448
anvano
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
anvano
Участник
Вот статейка со ссылкой на исходники деревьев, используемых на RSDN

http://www.rsdn.ru/article/files/scripts/HTMLTree.xml

Сами разворачивающиеся деревья, написанные с помощью этого контрола можно видеть тут:

www.rsdn.ru
...
Рейтинг: 0 / 0
01.10.2006, 12:39
| Ответить | Цитировать | Написать  
Как привильнее сделать дерево
    #34024852
Фотография Damnedest
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Damnedest
Участник
Большое спасибо за ссылку. К сожалению это не совсем то, там находится в одной картинки еще и плюсик. (http://www.rsdn.ru/images/tree/atc.gif), а у меня как раз сейчас основная проблема с расположением двух картинко подряд в LI...

Вообще ничего не получается. Помогите пожалуйста, кто хорошо разбирается в CSS...
...
Рейтинг: 0 / 0
01.10.2006, 23:57
| Ответить | Цитировать | Написать  
Как привильнее сделать дерево
    #34025584
Фотография Гутманс
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гутманс
Участник
Damnedest
http://www.hotscripts.com тут полно всего и с плюсиками и с минусиками тирэ имеется.
...
Рейтинг: 0 / 0
02.10.2006, 12:11
| Ответить | Цитировать | Написать  
Как привильнее сделать дерево
    #34025835
Фотография Black
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Black
Участник
Модератор: Перенесено из форума PHP&PERL
...
Рейтинг: 0 / 0
02.10.2006, 13:16
| Ответить | Цитировать | Написать  
Как привильнее сделать дерево
    #34030217
М.Голованов
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
М.Голованов
Участник
DamnedestВообще ничего не получается. Помогите пожалуйста, кто хорошо разбирается в CSS...

А почему только в CSS? Что-то не помню, чтобы стили умели управлять состоянием документа.

Вообще возьмите дерево из

http://developer.yahoo.com/yui/

Сам пользуюсь и другим советую... хотя не навязываю...
...
Рейтинг: 0 / 0
04.10.2006, 00:02
| Ответить | Цитировать | Написать  
Период между сообщениями больше года.
Как привильнее сделать дерево
    #35808549
dareks
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dareks
Участник
Anjey aka PMв даном случае списком однозначно + немного работы с CSS и все будет выглядеть довольно таки прилично...

вот пример (правда это дерево не разворачивается):

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
<ul class="tree">
  <li class="root"><b> 22 </b>: Tue  17 -Jan- 2006   15 : 41 : 54 
    <ul class="tree">
      <li><a href="295.html"> 4533353 </a>: Tue  17 -Jan- 2006   15 : 47 : 22 </li><li><a href="549.html">
        Re:  22 </a>: Tue  21 -Feb- 2006   09 : 51 : 12 </li><li><a href="550.html">Re:  22 </a>: Tue  21 -Feb- 2006 
           10 : 02 : 27 
          <ul class="tree">
            <li class="last"><a href="551.html">Re: Re:  22 </a>: Tue  21 -Feb- 2006   10 : 05 : 41 
              <ul class="tree">
                <li class="last"><a href="552.html">Re[ 3 ]:  22 </a>: Tue  21 -Feb- 2006   10 : 23 : 14 
                  <ul class="tree">
                    <li class="last"><a href="553.html">Re: Re[ 3 ]:  22 </a>: Tue  21 -Feb- 2006   10 : 26 : 32 
                      <ul class="tree">
                        <li class="last"><a href="555.html">Re[ 5 ]:  22 </a>: Tue  21 -Feb- 2006   10 : 32 : 25 
                          <ul class="tree">
                            <li class="last"><a href="557.html">Re: Re[ 5 ]:  22 </a>: Tue  21 -Feb- 2006   11 : 39 : 43 </li></ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      <li><a href="554.html">Re:  22 </a>: Tue  21 -Feb- 2006   10 : 30 : 45 
        <ul class="tree">
          <li class="last"><a href="576.html">Re: Re:  22 </a>: Thu  23 -Feb- 2006   16 : 56 : 06 </li></ul>
      </li>
      <li><a href="556.html">Re:  22 </a>: Tue  21 -Feb- 2006   10 : 46 : 25 </li><li><a href="558.html">
        Re:  22 </a>: Wed  22 -Feb- 2006   10 : 47 : 55 
        <ul class="tree">
          <li><a href="559.html">Re: Re:  22 </a>: Wed  22 -Feb- 2006   10 : 50 : 53 </li><li><a href="560.html">
            Re: Re:  22 </a>: Wed  22 -Feb- 2006   14 : 30 : 23 
            <ul class="tree">
              <li class="last"><a href="585.html">Re: Re: Re:  22 </a>: Fri  24 -Feb- 2006   10 : 35 : 01 </li></ul>
          </li>
          <li class="last"><a href="561.html">Re: Re:  22 </a>: Wed  22 -Feb- 2006   14 : 36 : 55 
            <ul class="tree">
              <li class="last"><a href="562.html">Re[ 3 ]:  22 </a>: Wed  22 -Feb- 2006   15 : 17 : 32 
                <ul class="tree">
                  <li class="last"><a href="563.html">Re: Re[ 3 ]:  22 </a>: Wed  22 -Feb- 2006   15 : 21 : 56 
                    <ul class="tree">
                      <li class="last"><a href="564.html">Re: Re: Re[ 3 ]:  22 </a>: Wed  22 -Feb- 2006   15 : 22 : 41 </li></ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="565.html">Re:  22 </a>: Wed  22 -Feb- 2006   16 : 10 : 00 
        <ul class="tree">
          <li class="last"><a href="568.html">Re: Re:  22 </a>: Thu  23 -Feb- 2006   09 : 46 : 02 
            <ul class="tree">
              <li class="last"><a href="569.html">Re: Re: Re:  22 </a>: Thu  23 -Feb- 2006   10 : 06 : 40 
                <ul class="tree">
                  <li class="last"><a href="572.html">Re: Re: Re: Re:  22 </a>: Thu  23 -Feb- 2006   16 : 09 : 21 </li></ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="570.html">Re:  22 </a>: Thu  23 -Feb- 2006   10 : 54 : 04 
        <ul class="tree">
          <li class="last"><a href="587.html">Re: Re: Re: Re: Re[ 2 ]:  22 </a>: Fri  24 -Feb- 2006 
             10 : 41 : 43 </li></ul>
      </li>
      <li><a href="571.html">Re[ 2 ]:  22 </a>: Thu  23 -Feb- 2006   11 : 00 : 21 </li><li><a href="592.html">
        Re:  22 </a>: Fri  24 -Feb- 2006   14 : 16 : 36 </li><li class="last"><a href="594.html">Re:  22 </a>:
          Sat  25 -Feb- 2006   09 : 09 : 13 </li></ul>
  </li>
</ul>

как выглядит можна глянуть на картинке

А можно ли поделится CSS а именно last, tree, root ПЛИЗ
...
Рейтинг: 0 / 0
10.02.2009, 15:52
| Ответить | Цитировать | Написать  
Как привильнее сделать дерево
    #35808558
Evgeniy_SH
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Evgeniy_SH
Участник
ни чё так, тема от 06 года?:)
...
Рейтинг: 0 / 0
10.02.2009, 15:56
| Ответить | Цитировать | Написать  
Как привильнее сделать дерево
    #35808564
dareks
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
dareks
Участник
:) ну а что делать, задавать новую, нашел и решил ее продолжыть
...
Рейтинг: 0 / 0
10.02.2009, 15:57
| Ответить | Цитировать | Написать  
12 сообщений из 12, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как привильнее сделать дерево
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=34024013&tid=1455204]:
 0ms
get settings:
 9ms
get forum list:
 15ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 85ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 51ms
get tp. blocked users:
 2ms
others: 243ms
total:  427ms
созд. / загр.: 427ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]