I recently studied tree grid and had some knowledge of tree, so I wrote some ideas.
First, the AJAX request load, this time only to take out the first layer of the root layer of data, JS according to the rule rendering generated DOM, output. So in a particular table or div appear in the structure of the tree, and each layer of the tree in front of the open or close the picture, this at the time of generation has been judged, if it is a new AJAX request, it should be closed, waiting for the user to click.
The event is triggered when the user clicks on this open/closed picture. You need to first decide whether to open or close. If it is turned off, close by: Compare the ID of this line with the next line to the last ID for the IndexOf () method to return the value 0,-1, if there is an equal string, prove to be a subset, then perform close, set display to none, or open if it is off.
Open by: First judge the next behavior is not empty NextNode!=null (at this point the next row has data) or nextnode==null (this means that the next line has no data, that is, the last row of the table)
if (NextNode!=null) {//The next row has data
You do not need to perform AJAX, and you can simply traverse the DOM (in the same case as the current subset in the ID) to expand
}else{//the next line has no data last line
if (indexof==0) {
The next line is equal before the subset that is closed is removed
No AJAX requests required
}else{
The next line element is not a subset of the current row at this time
Ajax requests
}
}
The idea of JS Ajax spanning tree