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

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

1 голос
/ 11 января 2011

Я новичок в 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>, я теряю значок элемента ...

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

1 Ответ

4 голосов
/ 14 января 2011

Похоже, это шаблон, используемый 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>
...