DHTMLX Docs & Samples Explorer

Loading from JSArray

There is a possibility to load data from JS Array. You can load data from an array object or a file.

reload from JS array (textarea)
load from external JS array data file

Format of JS array.
Tree item is represented with three values as sub-arrays of the top array - id, parent_id, text. The order of rows in JS array doesn't matter.

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">
   <a href="javascript:void(0)" onClick="tree.deleteChildItems(0);  eval('var z='+document.getElementById('a12').value); tree.loadJSArray(z);">
reload from JS array (textarea)
</a>         <br/>
<a href="javascript:void(0)" onClick="tree.deleteChildItems(0); tree.loadJSArrayFile('../common/data.js');">
load from external JS array data file
</a>
     </td>
  </tr>
   </table>
 
<textarea id="a12" rows="8" cols="40">[[1,0,"1111"],
[2,0,"2222"],
[3,0,"3333"],
[4,2,"child"]]</textarea>
<script>
var tree = new dhtmlXTreeObject('treeboxbox_tree', '100%', '100%', 0);
tree.setSkin('dhx_skyblue');
tree.setImagePath("../../codebase/imgs/csh_bluebooks/");
tree.enableDragAndDrop(true);
tree.loadJSArray([[1, 0, "1111"], [2, 0, "2222"], [3, 0, "3333"], [4, 2, "child"]]);
</script>