Как мне представить дерево в таблице HTML? - PullRequest
Новая
       17

Как мне представить дерево в таблице HTML?

13 голосов
/ 03 июня 2009

Я пытаюсь показать древовидную структуру в таблице HTML. В основном это список людей, которых вы упомянули на сайте, но вы можете развернуть каждого из них и увидеть людей, на которых они ссылались (только 2 или 3 уровня). Я также показываю информацию о каждом человеке, поэтому использую таблицу с несколькими столбцами.

Мне интересно, как лучше всего отобразить это, чтобы люди на более низких уровнях выглядели «отступами», но избегая несоответствия между содержимым данных и заголовками, показывающими, что означает каждое число ...

Я в основном ищу здесь идеи для кражи :-) Вы когда-нибудь видели или делали сайт, на котором есть что-то подобное?

Редактировать: Спасибо за все ответы.

Я думаю, что не смог правильно объяснить, что я пытаюсь сделать. Это список людей, но причиной существования этого отчета являются номера, прикрепленные к каждому человеку, а не сам список.
Для каждого человека в этом «списке» я собираюсь показать данные справа от него, которые необходимо выровнять, например, чтобы «итоги» были внизу и т. Д.

Представьте себе, если у вас есть Windows Explorer с деревом слева, чтобы вы могли открывать и закрывать папки, но затем справа от каждой папки у вас есть данные, например, сколько там файлов, что вид информации и т. д. Точно так же, как вы попадаете на правой панели в проводнике Windows для «файлов» (в представлении «Подробности»), только то, что я делаю это для дерева слева. (Это не то, чем я занимаюсь, но это самая близкая аналогия, о которой я мог подумать)

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

Ответы [ 10 ]

7 голосов
/ 03 июня 2009

У меня нет ответа, но у меня есть иллюстрация для тех, у кого проблемы с визуализацией ОП.

Unix QPS (визуальный менеджер процессов) в Tree View показывает именно такое дерево / таблицу.

Поиск картинок Google находит несколько образцов изображений.

Лично я хотел бы знать, как реализовать это в браузере.

Редактировать: добавлен образец изображения:

alt text
(источник: nada.kth.se )

Редактировать: грубая реализация 

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html>
    <head>
        <style>
            .removed
            {
                display:none;
            }

            .expands
            {
                cursor:pointer; cursor:hand;
            }

            .child1 td:first-child
            {
                padding-left: 1em;
            }

            .child2 td:first-child
            {
                padding-left: 2em;
            }
        </style>
        <script>
            function toggle()
            {
                for(var i=0; i<arguments.length; i++)
                {
                    with(document.getElementById(arguments[i]))
                    {
                        if(className.indexOf('removed') > -1)
                        {
                            className = className.replace('removed');
                        }
                        else
                        {
                            className += ' removed';
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
    <table>
        <thead>
            <tr>
                <th>Person</th>
                <th>Prop 1</th>
                <th>Prop 2</th>
                <th>Prop 3</th>
            </tr>
        </thead>
        <tbody>
            <tr id="p1" class="expands" onclick="toggle('p2','p3')">
                <td>P1</td>
                <td>a</td>
                <td>b</td>
                <td>c</td>
            </tr>
            <tr id="p2" class="removed child1">
                <td>P2</td>
                <td>a</td>
                <td>b</td>
                <td>c</td>
            </tr>
            <tr id="p3" class="removed child2">
                <td>P3</td>
                <td>a</td>
                <td>b</td>
                <td>c</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>Totals:</td>
                <td>x</td>
                <td>y</td>
                <td>z</td>
            </tr>
        </tfoot>
    </table>
    </body>
</html>
6 голосов
/ 03 июня 2009

Используйте семантически подходящий тег для списков: <ul>. просто вложите их. Вы можете скрыть часть структуры или создать ее на лету. 

<ul id='n0>
  <li id='n1'>One guy</li>
  <li id='n2'>Second guy
    <ul id='n2.0'>
      <li id='n2.1'>first one of second guy</li>
      <li id='n2.2'>last of second</li>
    </ul>
  </li>
  <li id='n3'>Third one</li>
</ul>

и так далее. наименование предметов зависит от вас, я обычно делаю это либо отражая будущее (как здесь), либо идентификаторы БД.

4 голосов
/ 03 сентября 2012

Названия такого макета:

  • сетка деревьев / сетка деревьев (напр .: Ajax)
  • древовидный список / древовидный список (например, Microsoft .Net)
  • модель дерева / древовидная модель (например: Qt Framework)

Поиски по "treegrid" и "tree grid html5", кажется, дают лучшие результаты для реализации html.

3 голосов
/ 03 июня 2009

... Это в основном список людей ...

Вы не - это не табличные данные, это список (<ul>)

2 голосов
/ 03 июня 2009

Мы используем группу DIV для отображения аналогичной структуры. Нечетные (1-я позиция, 3-я, 5-я и т. Д.) Каждая имеет однострочную таблицу внутри, чётные (2-я, 4-я и т. Д.) Изначально CSS'ы 'отображают: нет' Первая ячейка каждой таблицы содержит ссылку, которая запускает DIV под ней для заполнения данными, которые возвращаются с сервера посредством вызова AJAX. Возвращаемые данные могут иметь ту же структуру, что и материал первого уровня (количество «расширяемых» строк), или просто «Подробности» о рассматриваемой записи. Ничего семантического в этом нет, но это выглядит так, как того хочет клиент, и это работает. Вот скриншоты:

Первоначальный список перед расширением: альтернативный текст http://img26.imageshack.us/img26/5986/28656041.png

После нажатия на последнюю ссылку (70036720): альтернативный текст http://img15.imageshack.us/img15/7455/40596280.png

После нажатия на ссылку на втором уровне (70036720-1): альтернативный текст http://img197.imageshack.us/img197/4588/37964248.png

0 голосов
/ 26 ноября 2017

Просто преобразуйте древовидную структуру данных в одномерный массив с отношениями ребенка и родителей, а затем используйте этот одномерный массив, чтобы отобразить ваши данные в таблице.

0 голосов
/ 03 июня 2009

Даниэль, чтобы получить древовидную структуру, такую ​​как иерархия папок в проводнике Windows, вам понадобятся таблицы, элементы div, изображения (чтобы можно было свернуть их) и т. Д. Ваши div'ы должны иметь автоматически генерируемые или инкрементные идентификаторы. Видимость вашего div должна быть заблокирована или отсутствует, когда пользователь нажимает на значок «Развернуть / Свернуть». Это должно быть сделано в JavaScript.

Я сделал аналогичную вещь, когда мои данные были в формате xml, содержащем разделы, проекты внутри подразделений, ресурсы внутри проектов и т. Д. Я применил xslt для генерации reqd html-вывода для древовидной структуры. Дайте мне знать, если ваш запрос такой же. Так что я могу выложить образец xml, xslt.

0 голосов
/ 03 июня 2009

Итак, у вас есть списки людей и групп людей. Расположите это как вложенные списки.

Тогда у вас есть табличная информация о каждом человеке. Представьте это как серию таблиц.

Далее, свяжите людей с таблицей. Это можно сделать с помощью <a href="#table_about_person_a"> и <table id="table_about_person_a">

Если включен JavaScript, загрузите таблицу стилей, в которой отображаются все таблицы: нет;

Присоедините обработчики событий к каждой ссылке в списке, которая читает href, чтобы получить идентификатор таблицы, связанной с этим пользователем. Установите JS для отображения таблицы: таблица (или блок в IE <= 7). </p>

Из-за проблем с Internet Explorer лучше всего это сделать, назначив класс всем таблицам, чтобы скрыть их, а затем удалив его, чтобы показать их.

Затем добавьте CSS, чтобы расположить таблицы рядом со списком.

Без JS оно должно ухудшаться, чтобы щелкнуть имя прокручивает браузер до связанной с ним таблицы.

0 голосов
/ 03 июня 2009

Я думаю, что таблица - это не тот инструмент, который нужно использовать. Обычно деревья определяются как список поддеревьев (плюс, возможно, некоторые данные), и, таким образом, я думаю, что семантическое преобразование в html должно использовать несколько вложенных списков (и, если вы хотите, чтобы эта динамичность была там, убедитесь, что вы сохранили все списки открыть и ЗАКРЫТЬ их с помощью JavaScript, чтобы они открывались, если у пользователя отключен JavaScript).

На самом деле, вы также сказали, что у вас есть СПИСОК людей, которые заходили на сайт, так что он выглядит гораздо больше, чем список.

Кроме того, вложенные списки могут быть легко отформатированы с использованием CSS, чтобы выглядеть довольно красиво. По крайней мере, попытка сделать так, чтобы такой вложенный список выглядел хорошо, - это гораздо, гораздо меньше, чем попытка заставить таблицу выглядеть так (я пробовал оба).

Итак, в целом: используйте вложенный список. Он лучше соответствует структуре данных, которую вы представляете, а также лучше соответствует вашей интуиции, а также может быть лучше отформатирован.

0 голосов
/ 03 июня 2009

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

...