Как структурировать данные HTML для отображения в виде дерева с помощью jsTree

Я новичок в jsTree и хотел бы создать дерево, начиная со списка <ul> и <li> внутри моей HTML-страницы. Это с использованием плагина html_data (надеюсь, это правильный путь).

Мне интересно: как правильно записать в HTML данные, которые будут преобразованы в дерево с помощью jsTree?

документация jsTree предлагает следующее:

<li>
    <a href="some_value_here">Node title</a>
    <!-- UL node only needed for children - omit if there are no children -->
    <ul>
        <!-- Children LI nodes here -->
    </ul>
</li>

Но не указано, куда поместить атрибут id, который jsTree использует для ссылки на данные.

Более того, это, кажется, не работает так хорошо. Я видел кого-то, кто встраивает этот код с тегами <div> и <ul>. Например:

<div id="categories">
    <ul>
        <li><a href="#">Category 1</a>
            <ul>
                <li><a href="#">SubCategory 1</a></li>
                <li><a href="#">SubCategory 2</a></li>
            </ul>
        </li>
        <li><a href="#">Category 2</a></li>
    </ul>
</div>

Обратите внимание, что id в теге div. Это правильный путь? Мне кажется не очень удобным использовать теги <a href="#"> только для написания текста узла... И если я использую <span>, я теряю значок элемента...

Надеюсь, у кого-то умнее, чем у меня.


html html-lists jstree
person bluish    schedule 11.01.2011    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Кажется, это шаблон, используемый jsTree для рисования дерева:

<div id="mytree">
    <ul>
        <li>
            <a href="#">Node 1</a>
            <ul>
                <li>
                    <a href="#">Node 1.1</a>
                </li>
                <li>
                    <a href="#">Node 1.2</a>
                    <ul>
                        <li>
                            <a href="#">Node 1.2.1</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">Node 2</a>
        </li>
    </ul>
</div>

То есть каждый узел имеет структуру, рекомендованную документацией jsTree:

<li>
    <a href="some_value_here">Node title</a>
    <!-- UL node only needed for children - omit if there are no children -->
    <ul>
        <!-- Children LI nodes here (recursively apply the same pattern)-->
    </ul>
</li>

И вся структура должна быть обернута (что документация не говорит):

<div id="mytree">
    <ul>
        <!-- all the tree here -->
    </ul>
</div>
person bluish    schedule 14.01.2011
comment
Спасибо! Это было очень полезно для меня сегодня. Смешно, что они не исправляют такое простое упущение в документации. - person ybull; 29.11.2011