dynatree：如何將dynatree數據轉換為HTML？

Question

使用我' dynatree插件來編寫一個在線應用程序和我'使用toDict（）方法用於樹數據轉換成JavaScript對象然后存儲在數據庫中。

我的問題是：

我需要一種將這些數據轉換為HTML（ul-li）結構的方法。

例如

Title 1
Title 2
  +Title 2.1
  +Title 2.2
Title 3

表格應轉換為：

<ul>
<li>Title 1</li>
<li>Title 2
  <ul>
    <li>Title 2.1</li>
    <li>Title 2.2</li>
  </ul>
</li>
<li>Title 3</li>
</ul>

以上表格。 如何在PHP中完成（數據將從數據庫提供）？

數據樣本：

{"title":"Products", "key":"products", "isFolder":true, "isLazy":false, "tooltip":null, "href":null, "icon":null, "addClass":null, "noLink":false, "activate":false, "focus":false, "expand":true, "select":false, "hideCheckbox":true, "unselectable":false, "children":[{"title":"Product 1 Category", "key":"products-product-1-category", "isFolder":true, "isLazy":false, "tooltip":"Product 1", "href":null, "icon":null, "addClass":null, "noLink":false, "activate":false, "focus":false, "expand":true, "select":false, "hideCheckbox":false, "unselectable":false, "children":[{"title":"Product 1.1 Category", "key":"products-product-1-product-11-category", "isFolder":true, "isLazy":false, "tooltip":"Product 1.1 Category", "href":null, "icon":null, "addClass":null, "noLink":false, "activate":true, "focus":false, "expand":true, "select":false, "hideCheckbox":false, "unselectable":false, "children":[{"title":"Product Name", "key":"products-product-1-category-product-11-category-product-name", "isFolder":false, "isLazy":false, "tooltip":"Product Name", "href":null, "icon":null, "addClass":null, "noLink":false, "activate":false, "focus":false, "expand":false, "select":false, "hideCheckbox":false, "unselectable":false}]}]}]}

注意 ：isFolder表示它將是列表項（li），但將具有子無序列表（ul-li）結構。

上面的數據結構等於：

Products (isFolder = true)
  +Product 1 Category (isFolder = true)
    +Product 1.1 Category (isFolder = true)
      +Product Name (isFolder = false)

和HTML表單保存如下（或其他任何可擴展/可折疊列表樣式菜單表單）：

<ul>
<li>Products
<ul>
    <li>+Product 1 Category
    <ul>
        <li>+Product 1.1 Category
        <ul>
            <li>+Product Name</li>
        </ul>
        </li>
    </ul>
    </li>
</ul>
</li>
</ul>

Answer 1

由於無法找到比dynatree自己的方式更好的解決方案，因此我使用Dynatree自己的列表機制解決了該問題。

我包含了Dynatree.js，添加了div（id = tree）並啟動

$('#tree').dynatree();

功能。 這不是最有用的方法（由於SEO / URL鏈接和可視化問題），但它似乎是最簡單的方法。