Home > Developer > Web Develop
Optimizing loading of large datasets in Dhtmlxtree: Dynamic Loading Dynamically loaded
First, Dhtmlxtree API translation:
If the tree contains a large number of nodes (or if the user does not want to waste time on loading the hidden nodes), it is best to load them on request instead of loading them immediately.
To achieve this, the ability to dynamically load tree levels with XML is introduced.
To activate dynamic loading:
1. The user should represent a dynamically loaded node in the XML: Add child= "1" to all parameters, indicating that it has child nodes, and that the child nodes under the object are dynamically loaded when clicked.
version= " 1.0 "encoding=" iso-8859-1 "?> <tree id= "0" > <item text= "surveillance" id= "A1" im0= "Book.gif" ... child= "1" /> < Item ... /> ... </tree>
2. Setting the Setxmlautoloading method means to turn on dynamic loading /span>
Example: Tree.Setxmlautoloading(URL); Tree.Load(File);Load the first level of the tree
Second, the actual application of the project
1. First import dhtmlxtree js,https://docs.dhtmlx.com on the page
2. Dhtmlxtree initialization, in the interface:
<body>
<div id= ' treediv2 ' class= ' Field-tree-panel ' ></div>
</body>
<script type= "Text/javascript" >
var mytree;
function Inittree () {
Mytree = new Dhtmlxtreeobject ("Treediv2", "100%", "100%", 0); Defining Tree Objects
Mytree.setimagepath ("/esa/resources/dhtmlxtree/codebase/imgs/dhxtree_skyblue/"); Set Tree style Address
Mytree.enablecheckboxes (TRUE); Set check box
Mytree.enablethreestatecheckboxes (FALSE); Set whether to select all child nodes when the parent node is selected, true: Select All tick, false: only the parent node before the tick
Mytree.setdatamode ("xml"); Set the way data is loaded, optional XML, JSON, CSV, JS ARRAY
mytree.setxmlautoloading ("url"); Set the URL for automatic loading
Mytree.load ("Url?id=0"); Set the URL to load for the first time
}
</script>
3. Background method:
public string Gettree (string ID, HttpServletResponse servletresponse) {
Servletresponse.setcontenttype ("Text/xml;charset=utf-8"); How to solve Chinese garbled characters
if (Stringutils.isempty (ID)) {
return null;
}
StringBuilder Sbuilder = new StringBuilder ();
Sbuilder.append ("<?xml version=\" 1.0\ "encoding=\" utf-8\ "?>"); Set the XML header
if ("0". Equals (ID)) {
The first time the root node is loaded
Sbuilder.append ("<tree id=\" 0\ "><item text=\" root\ "id=\" -1\ "child=\" 1\ "open=\" 0\ ">");
Sbuilder.append ("</item></tree>");
}else{
Dynamically load child nodes when clicking the plus sign
Sbuilder.append ("<tree id=\" "+ ID +" \ "");
Sbuilder.append (">");
list<map<string, object>> nodeList = Customreportservice.querytree (ID);
For (map<string, object> map:nodelist) {
Sbuilder.append ("<item text=");
Sbuilder.append ("\" + map.get ("NAME"). ToString () + "\" ");
Sbuilder.append ("id =");
Sbuilder.append ("\" + map.get ("ID"). ToString () + "\" ");
Sbuilder.append ("child=\" 1\ "/>");
}
Sbuilder.append ("</tree>");
}
return sbuilder.tostring ();
}
4. Attributes to be aware of
Open opens the node for any value (when all nodes are opened, the subordinate nodes are automatically loaded and the page scrolls.) It is recommended to only open the root node to show the first level of data. Click the plus sign to automatically reload the subordinate node)
Checked select nodes for any value
A child of 1 indicates that there are children nodes
Reference Https://docs.dhtmlx.com/tree__increasing_tree_s_performance.html Official documentation
Dhtmlxtree loading a large data volume tree
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
