Search code examples
phphtmldynatree

dynatree : How to convert dynatree data to HTML?

I'am using dynatree plugin to code an Online App and i'am using toDict() method for converting the tree data into a JavaScript object then storing in a database.

My problem is:

I need a way to convert this data to HTML (ul-li) structure.

E.g

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

form should be converted to:

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

above form. How can be done in PHP (data will be given from database)?

Data sample:

{"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}]}]}]}

NOTE : isFolder means, it will be list item (li) but will have a child unordered-list (ul-li) structure.

Above data structure is equal to:

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

and HTML form shold be like below (or any other expandable/collapsable list style menu form):

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

  • Because of i couldn't found a better solution then dynatree's own way ,i've solved the problem by using Dynatree's own listing mechanism.

    I've included Dynatree.js, added a div (id=tree) and fire

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

    function. It is not most useful way (because of SEO/url linking and visualization issues) but it seems the easiest way to do it.