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

Question

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

Вы можете использовать ?strsplit (как предложено в ответе @ Аруна в Извлечение чисел из векторов (строк) ):

l <- c("djud7+dg[a]hs667", "7fd*hac11(5)", "2tu,g7gka5")

## split string at non-digits
s <- strsplit(l, "[^[:digit:]]")

## convert strings to numeric ("" become NA)
solution <- as.numeric(unlist(s))

## remove NA and duplicates
solution <- unique(solution[!is.na(solution)])
# [1]   7 667  11   5   2

13

html layout tree html-table

задан Brian Tompsett - 汤莱恩 25 September 2016 в 16:10

8 ответов

score 7 · Answer 1

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

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

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

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

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

_{(источник: ] 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>

score 6 · Answer 2

Используйте семантически подходящий тег для списков:

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

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

score 3 · Answer 3

... По сути, это список людей ...

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

3

ответ дан 1 December 2019 в 22:24

score 2 · Answer 4

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

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

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

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

score 0 · Answer 5

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

score 0 · Answer 6

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

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

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

Итак, в целом: используйте вложенный список.

score 0 · Answer 7

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

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

Затем свяжите людей к столу. Это можно сделать с помощью и

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

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

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

0

ответ дан 1 December 2019 в 22:24

Daniel, to get a tree structure like the folder hierarchy in windows explorer you will need to have tables, divs, images (to be able to expand collapse), etc . Your divs should hav auto generated or incremental ids. Your div visibility should be set to block or none when the user clicks on the expand/ collapse icon. This should be done in javascript.

I have done a similar thing, where my data was in an xml format containing divisions, projects within the divisions, resources within the projects, etc. I had applied xslt to generate the reqd html output for tree structure. Let me know if your req is the same. So tht I can post you the sample xml, xslt.

0

ответ дан 1 December 2019 в 22:24

Другие вопросы по тегам:

html layout tree html-table

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

8 ответов

Похожие вопросы: