Javascript-treeview Parent-Child linkage effect keeps node state consistent _javascript skills

Most of us have used the TreeView control, and the evaluation of this control is also varied, but I think no matter how it is a free open source control, so I still use it. In the first contact with ASP.net, remember to do a permission tree to assign permissions, at that time only know that there is this tree, after a day of research on its server-side behavior basic and get clear, but because of the level of JS at that time is limited, so the client code is very afraid, basically did not see.
There was a requirement that if a node were selected, all child nodes of that node would be selected, and if all the child nodes of the node were deselected, the node would also be deselected (node consistency), as opposed.
Another requirement is that it's better if you can implement a three-state tree (this is a bit difficult, not discussed in this article). This article will describe in detail the previous requirement 1.
First of all, we should be glad that Microsoft's TreeView control is open source, whether it is client code or server-side code you can easily get, you can go to Microsoft's website download. Also seen on the internet a number of articles on this issue, they are mostly using a treeview outside the implementation of JS, I personally think from an object-oriented perspective, the function belongs to the TreeView, so there is no reason to separate it out, So today I'm going to modify TREEVIEW.HTC to implement the above functionality. To get the file (TREEVIEW.HTC) You can download it from Microsoft's website.
The fact that this function has also bothered me for a long time, has been trying to solve this problem, but has been no time to study the code in TREEVIEW.HTC, today finally determined to fix it.
We know that the event handler needs to be fired in the Oncheck of the TreeView, and this function is easy to find and can be found in the client script generated by the TreeView, as follows:
oncheck= "javascript:if (this.clickednodeindex!= null) this.queueevent (' Oncheck ', This.clickednodeindex)"
From this we can go to HTC (in the future, HTC refers to TREEVIEW.HTC), find the Docheckboxclick method, just see the name of what it is to do (name is too important, otherwise in 3000 lines of code to find a function really tired).
The method is when the user clicks the checkbox using the function to be processed, the function looks like this:
function Docheckboxclick (EL) {
var checked = Private_getattribute (el, "checked")
el.checked =!checked;
var evt = Createeventobject ();
Evt.treenodeindex = Getnodeindex (EL);
g_nodeclicked = El;
_tvevtcheck.fire (EVT);
Setnodestate (el,el.checked);//Maybe Need el only,but I do it ' s safly
}
The first line, the second line, and the last line I added, line 12th is to modify the Checked property when the page is returned, in accordance with the original method after the submission of el.checked is undefined, so that the node can not be properly synchronized, if the reader is interested to try. The Setnodestate function, which can be seen from the name, is used to set the state of the node, passing the node currently selected by you as a parameter inside the function. As the note says, you can actually just pass el in without having to send a Boolean, but I think it might be safer to pass it on, but it doesn't matter, you feel bad about it:
Here's a look at the Setnodestate function, which consists of two methods, one to set the state of all children's nodes, and one to set the parent node state of the node. The code is as follows:
function Setnodestate (el,state) {
_setchildnode (el,state);
_setparentnode (el,state);
}
In order to be able to set whether all child nodes of the current node and the parent node (this node) state one to We need the function _setchildnode, similarly in order to make the node's parent node and the node state one to We need the _setparentnode function. All two functions are recursive functions that will traverse all child nodes and all parent nodes and sibling nodes (why do we have to walk through sibling nodes later), let's take a look at the code that iterates through the children's nodes, as shown in the following code:
function _setchildnode (el,state) {
var childnodes = El.children;
if (Childnodes.length > 0) {//if has childs
for (var i = 0; i<=childnodes.length-1;i++) {
Private_setattribute (Childnodes[i], "Checked", state);
_savecheckstate (Childnodes[i]);
_setchildnode (childnodes[i],state);
}
}
}
This function first obtains all the child nodes of the current node, which can be used directly using the function GetChildren method provided by the TreeView, and I use the original method of making HTML. If the node has child nodes, it iterates through all the child nodes, setting the state of the child nodes in line with the current node's state, and the role of the _savecheckstate function is described later. The Private_setattribute method provides an internal setting for the TreeView (JS has no private keyword, just for illustration), which sets the checked property of each node to the state of the current node.
Here is how to set the parent node state code:
function _setparentnode (el,state) {
var parentnode = el.parentelement;
if (parentnode) {
if (!_checksiblingdnode (EL)) {
Private_setattribute (parentnode, "Checked", state);
_savecheckstate (parentnode);
_setparentnode (parentnode,state);
}
}
}
The function first obtains its parent node, if the parent node is present, check the sibling node of the current node, which mentions the need to check sibling nodes, where the purpose of checking sibling nodes is that the state of the parent node is not controlled by a node of the current node (this happens only if the current node has no sibling nodes), If any of the other brothers are selected, the parent node cannot be canceled, which will result in inconsistent inconsistencies between sibling nodes and parent-child nodes. The _savecheckstate function is also called inside the function, which is described later.
The following code describes how to check the status of sibling nodes, as follows:
function _checksiblingdnode (EL) {
var parentnode = el.parentelement;//can use Getparenttreenode function in this htc,but I like this usage.
for (var i = 0;i<=parentnode.children.length-1;i++) {
If (El!= parentnode.children[i]) {
if (Private_getattribute (Parentnode.children[i], "Checked")) {
return true;
}
}
}
return false;
}
As noted in the note, you can use the Getparenttreenode method to get the node's parent, but I prefer to use the original method:. This will exclude itself (if (el!=parentnode.children[i)).
With the above code we can do the client without refreshing the parent-child node of the same choice, then we now introduce the _savecheckstate function, if the function page is not submitted, the other than manually clicked on the node other than the node can not save the state. So the function is to save the state of all nodes (mostly automatically selected nodes), ensuring that the state of the tree is still present after the postback. The following code describes the _savecheckstate function with the following code:
function _savecheckstate (EL) {
if (Getnodeindex (EL))
Queueevent (' Oncheck ', Getnodeindex (EL));
}
This method first checks whether the current node's index is valid, and saves the state if it is valid. Here need to say what the Queueevent method did, the code I do not post, the actual meaning of the function is to save the operation of the client in a hidden domain named __treeview1_state__, so that in the return of the server will be based on the hidden domain, initialize the state of the tree. Where TreeView1 is the name of the TreeView in my test system.
The final issue is the deployment of the problem, because the HTC has been modified, so in the deployment of the need to replace the original HTC files.
If there is a need to modify the TREEVIEW.HTC (after the format), you can change the csdn on my message left email. My csdn account number is cuike519.
I hope Microsoft can add this feature to the TreeView control as soon as possible, and it is best to implement a polymorphic tree structure. Please visit the blog's related comments, I will update the article in the comments!