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

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

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

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

Изменить: Спасибо за все ответы.

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

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

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

Ответы

Ответ 1

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

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

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

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

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

alt text http://www.student.nada.kth.se/~f91-men/qps/tree.png

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

<!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>

Ответ 2

Используйте семантически соответствующий тег для списков: <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>

и т.д. Именование элементов зависит от вас, я обычно делаю это, либо отражаю struture (как здесь), либо идентификаторы базы данных.

Ответ 3

Имена такого макета:

tree grid/treegrid (например: Ajax)
просмотр списка дерева /treelistview (например: Microsoft.Net)
древовидная модель /treemodel (например: Qt Framework)

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

Ответ 4

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

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

Ответ 5

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

Исходный список перед расширением: alt text http://img26.imageshack.us/img26/5986/28656041.png

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

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

Ответ 6

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

Ответ 7

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

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

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

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

Ответ 8

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

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

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

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

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

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

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

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

Ответ 9

Daniel, чтобы получить древовидную структуру, такую как иерархия папок в проводнике Windows, вам понадобятся таблицы, divs, изображения (чтобы иметь возможность развернуть сбой) и т.д. Ваши div должны быть созданы автоматически или инкрементными идентификаторами. Если вы нажимаете на значок разворачивания/свернуть, ваша видимость div должна быть заблокирована или отсутствовать. Это должно быть сделано в javascript.

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

Ответ 10

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