Dhtmlxtree load XML with Ajax refresh

A long time ago, I learned to use Dhtmlxtree, it is a very good tree, easy to use, but a problem has not been resolved, has been a lot of times to check the database, followed the principle is, first find the superior, and then according to the superior ID to detect the subordinate ID, such a layer of check, So when the amount of data, the tree load will be very slow, and sometimes when he began to load, you can tell the person in front of the screen, "You can choose to check for a cup of coffee or go out to come back again, because it takes a long time", immediately silent.

The database is designed like this:

ID name Superior ID

1 A

2 B

3 C 1

4 D 1

......

Using the Dhtmlxtree method (viewing the API yourself):

Step one: Load js,css, including DHTMLXCOMMON.JS,DHTMLXTREE.JS,DHTMLXTREEEXTEND.JS,DHTMLXTREE.CSS

Step two: Write HTML, as follows

<table width= "100%" class= "searchtable" >
&LT;TR&GT;&LT;TD class= "Searchtdtitle" > Classification Architecture </td>
</tr>
<tr>
&LT;TD class= "Lefttree" ><a href= "Javascript:void" (0); "onclick=" Tree.openallitems (0); " > Expand </a>&nbsp;&nbsp;&nbsp;
<a href= "javascript:void (0);" onclick= "Tree.closeallitems (0);" > Fold </a></td>
</tr>
<tr>
&LT;TD class= "Lefttree" ><div id= "Treeboxbox_tree" class= "Dhtmlxtree" style= "width:230px"; ></div></td>
</tr>
</table>
<script>
Tree=new dhtmlxtreeobject ("Treeboxbox_tree", "100%", "100%", 0);//Initialize Tree
Tree.setimagepath ("<%=path%>/skins/blue/common/dhtmlx/images/csh_yellowbooks/");//Design picture path
Tree.enablecheckboxes (0);//whether to show check boxes
Tree.loadxml ("<%=path%>/drmstaxon.do?action=taxontree"); XML Path

Tree.setonclickhandler (AddChild); Click function
</script>
</body>

The function to load when you click:

I like to use jquery, so I need to call the jquery function (ouch, this doesn't need to be provided, Google, I know everything),

function AddChild (ID) {
Tree.deletechilditems (Tree.getselecteditemid (ID));//Delete his page child node before loading
var url= "<%=path%>/drmstaxon.do?action=gettaxonchild&taxonid=" +tree.getselecteditemid (ID); Send an AJAX URL
$.getjson (
Url
function (data) {
$.each (Data.rows,function (entryindex,entry) {//ajax callback, similar to a for loop.
Tree.insertnewchild (Tree.getselecteditemid (ID), entry[' Taxonid '],entry[' taxonname '], ', ' leaf.gif ', ' Folderopen.gif ', ' folderclosed.gif ', ', ', ') use this function.
});
}
);
}

Function Description:

Insertnewitem (Parentid,itemid,itemtext,itemactionhandler,image1,image2,image3,optionstr,childs)

It is obvious that the first ParentID is the parent node. Itemid,itemtext the ID and name of the child node that is loaded. Itemactionhandler I did not use, the initial analysis should be called function, Image1,image2,image3 is obviously the picture address and path. OPTIONSTR, Childs I've never used it, I'll tell you next time.