如何構建HTML數據以jsTree的形式顯示爲樹

Question

我是jsTree的新手，我想從我的HTML頁面中的<ul>和<li>列表開始創建一棵樹。這使用html_data插件（我希望這是正確的方式）。

我在想：這是正確的方式寫在HTML中的數據，將由jsTree變成一棵樹？

jsTree documentation表明，這一個：

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

注意的是，在div標籤的id。 這是一個正確的方法嗎？ 對我來說，這似乎不是那麼舒服使用<a href="#">標籤只寫一個節點的文本...如果我使用<span>我鬆散的項目圖標...

希望有一個人比我更清楚的頭。

Answer 1

這似乎是使用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>