Initialize from HTML

To do automatic conversion:

Add dhtmlXTree_start.js file into the page
Set class attribute of the top div element to dhtmlxTree
Set some attributes defining tree-specific properties of the top div element
- setImagePath - sets path to tree's image files
- id - name of javascript variable referred to the tree object

Initilize from list

Root
- Child1
  - Child 1-1
- Child2
- Bold Italic

Root
- Child1
  - Child 1-1
- Child2
- Bold Italic

Initialize from inline XML structure

It is possible to use standard dhtmlxTree XML structure enclosed in XMP tag inside div element which is a tree container.

Initialize from HTML using script command

It is possible to convert existing html structure calling an appropriate script command. To test it press the Confirm button.

Root
- Child1
  - Child 1-1
- Child2
- Bold Italic

Source

<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css">
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxtree.js"></script>
<script  src="../../codebase/ext/dhtmlxtree_start.js"></script>
<script>dhtmlx.skin = "dhx_skyblue";</script>
 
<div class="h3">Initilize from list</div>
<table>
    <tr>
        <td>
<div id="treeboxbox_tree" setImagePath="../../codebase/imgs/csh_bluebooks/" xclass="dhtmlxTree" style="width:250px; height:218px; background-color:#f5f5f5;border :1px solid Silver; ">
    <ul>
        <li>Root
        <ul>
            <li>Child1
            <ul>
                <li>Child 1-1</li>
            </ul>
            </li>
            <li>Child2</li>
            <li><b>Bold</b> <i>Italic</i></li>
        </ul>
        </li>
    </ul></li>
</div>
        </td>
        <td>
<div id="treeboxbox_tree" setImagePath="../../codebase/imgs/csh_bluebooks/" class="dhtmlxTree" style="width:250px; height:218px; background-color:#f5f5f5;border :1px solid Silver;">
    <ul>
        <li>Root
        <ul>
            <li>Child1
            <ul>
                <li>Child 1-1</li>
            </ul>
            </li>
            <li>Child2</li>
            <li><b>Bold</b> <i>Italic</i></li>
        </ul>
        </li>
    </ul></li>
</div>
        </td>
    </tr>
</table>
 
<!--- Start --->    
<div class="h3"><strong>Initialize from inline XML structure</strong></div>
<div class="txt">It is possible to use standard dhtmlxTree XML structure enclosed in <strong>XMP</strong>
tag inside div element which is a tree container.<br>
<br>
<div id="treeboxbox_tree2" setImagePath="../../codebase/imgs/" class="dhtmlxTree" style="width:250px; height:218px; background-color:#f5f5f5;border :1px solid Silver;;">
<xmp container="true">
<item text="Root" open="1" id="11">
    <item text="Child1" select="1" open="1" id="12">
        <item text="Child1-1" id="13"/>
    </item>
    <item text="Child2" id="14"/>
    <item id="15" text="Text"/>
</item>
</xmp>
</div>
 
 
<!--- Start --->    
<div class="h3"><strong>Initialize from HTML using script command</strong></div>
<div class="txt">It is possible to convert existing html structure calling an appropriate script command. To test it press the Confirm button.</div>
<div id="listBox" setImagePath="../../codebase/imgs/" style="width:250px; height:218px; background-color:#f5f5f5;border :1px solid Silver;">
<ul>
    <li>Root
    <ul>
        <li>Child1
        <ul>
            <li>Child 1-1</li>
        </ul>
        </li>
        <li>Child2</li>
        <li><b>Bold</b> <i>Italic</i></li>
    </ul>
    </li>
</ul>
</div>
<button onClick="var myTree = dhtmlXTreeFromHTML('listBox');">Convert</button>