Different loading modes

To load the tree from JSON you need to have a JSON object or a file.

reload from JSON object (textarea)
load from external JSON file

Format of JSON.
{ id:ID, attributes.... , item:[ array of child objects ]}

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_json.js"></script>   
   
   <table>
  <tr>
     <td>
        <div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"/>
     </td>
     <td rowspan="2" style="padding-left:25" valign="top">
<textarea id="a12" rows="8" cols="42">
{id:0,item:[
{id:1,text:"1111"},
{id:2, text:"222222",item:[
    {id:"21", text:"child"}]},
{id:3,text:"3333"}
]}
</textarea>
    <br/>
      <a href="javascript:void(0)" onClick="tree.deleteChildItems(0);  eval('var z='+document.getElementById('a12').value); tree.loadJSONObject(z);">
reload from JSON object (textarea)
</a>         <br/>
<a href="javascript:void(0)" onClick="tree.deleteChildItems(0); tree.loadJSON('../common/data.json');">
load from external JSON file
</a>
     </td>
  </tr>
   </table>
 
 
<script>var tree = new dhtmlXTreeObject('treeboxbox_tree', '100%', '100%', 0);
tree.setSkin('dhx_skyblue');
tree.setImagePath("../../codebase/imgs/csh_bluebooks/");
tree.enableDragAndDrop(true);
tree.loadJSONObject({
    id: 0,
    item: [{
        id: 1,
        text: "1111"
    }, {
        id: 2,
        text: "222222",
        item: [{
            id: "21",
            text: "child"
        }]
        }, {
        id: 3,
        text: "3333"
    }]
    });</script>