We have used TreeView controls, and the evaluation of this control is also a variety of, but I think it is a free open source control, so I still use it. When just contacted asp.net, I remember to be a rights to allocation, I only knew that there was this tree. After a day study, the behavior of its server side and clear, but because the JS level was limited, The code to the client is very afraid, and I have never seen it.
There is such a request at that time: If a node is selected, all sub-nodes of the node are selected, if all sub-nodes of the node deselect, the node is deselected (node consistency), the same.
There is also a requirement that if you can achieve a tricure, it is better (this is a bit difficult, this article is not discussed). This article will detail the previous requirements 1.
First we have to celebrate Microsoft's TreeView control is open source, whether it is client code or server-side code, you can easily get it, you can download it on Microsoft's website. I have seen some articles that tell the question, most of them use a TreeView JS implementation, I personally think that from the object-oriented point of view, this feature belongs to TreeView, so there is no reason to separate it, so I will Modify TreeView.htc to implement the above features. To get the file (TreeView.htc) can download it on Microsoft's website.
It is said that the real function has also plagued me for a long time, I have always wanted to solve this problem, but I haven't time to study the code in treeview.htc. I finally made it up with it today.
We know that in TreeView's OnCheck needs to be inspired the event handler, this function is easy to find, can be found in the customer script generated by TreeView, the code segment is as follows:
OnCheck = "JavaScript: if (this.clickednodeIndex! = null) this.queueevent ('oncheck', this.clickednodeIndex"
From this we can go to HTC (HTC said later is TreeView.htc), find the DocheckboxClick method, just look at what it is doing (naming is too important, otherwise find a function in 3000 line code really tired).
The method is that the function is as follows: The function is as follows:
Function DocheckboxClick (EL) {
Var checked = private_getattribute (el, "checked")
El.checked =! checked;
Var evt = creteEventObject ();
Evt.treenodeIndex = GetNodeIndex (EL);
g_nodeclicked = EL;
_TVEVTCHECK.FIRE (EVT);
SetNodeState (EL, El.checked); // Maybe Need El Only, But I Think It's Safly
}
The first line, the second line, and the last line are I added. The first line is to modify when the checkage attribute is invalid after the page back pass, according to the original method, after submitting El.Checked is undefined, so Leading to the correct synchronization node, if you are interested, you can try it. SetNodeState functions, you can see that the function is used to set the node status, and it passes the node you selected as a parameter to the inside of the function. If you say in the comment, you can only pass the EL in, without having to pass a Boolean value, but I want to pass may be safer, but there is no relationship, you feel uncomfortable to modify:. Let's take a look at the setNodeState's function body, which consists of two methods, one is to set the state of all child nodes, one is the parent node status of the node. code show as below:
Function setNodeState (EL, State) {
_SETCHILDNODE (EL, STATE);
_SETPARENTNODE (EL, STATE);
}
In order to set all the children nodes of the current node and the parent node (this node) status one to us to need a function _SetChildNode, the same manner in order to enable the parent node and the node status of the node to the _SetParentNode function. Both functions are recursive functions, which will traverse all child nodes and all parent nodes and brothers nodes (why you want to traverse the brothers and nodes later), let's take a look at the code traversing the child's node, the code is as follows:
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_setttribute (ChildNodes [i], "checked", state);
_SAVECHECKSTATE (ChildNodes [i]);
_SETCHILDNODE (ChildNodes [i], state);
}
}
}
This function first gets all child nodes of the current node, here you can directly use the function getChildren method provided by TreeView, and I use the original method of HTML. If the node exists, it is traversed all child nodes, and the status of the sub-node and the status of the current node are consistent, the _savecheckstate function will be introduced later. The Private_SetAttribute method is a method for the internal setting attribute provided by TreeView (JS does not have a private keyword, here only explanation), which sets the check attribute of each node as the current node.
Here's how to set up the code of the parent node status:
Function _SetParentNode (EL, State) {
Var parentnode = el.parentelement;
IF (ParentNode) {
IF (! _ checksiblingdnode (el)) {
Private_setttribute (ParentNode, "Checked", State;
_SAVECHECKSTATE (PARENTNODE);
_SETPARENTNODE (Parentnode, State);
}
}
}
This function gets its parent node. If the parent node exists, it checks the brothers node of the current node. The above mentioned the need to check the brothers node. The purpose of the brothers node is to: the state of the parent node is not controlled by a node of the current node ( This situation exists only if there is no brothers node in the current node), if there are other brothers who are selected, then the parent node cannot be canceled, which will cause the brothers and the parent nodes inconsistent. The _savecheckstate function is also called in this function, which will be introduced later. The following code describes how to check the status of the brothers node, the code is as follows:
Function _ChecksiblingDNode (EL) {
VAR PARENTNODE = El.parentelement; // you 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 mentioned, you can use the getParentTreenode method to get the parent node of the node, but I prefer to use the original method:. Here will be excluded (IF (EL! = ParentNode.children [i])).
With the above code, we can do the same choice for the client's unfolded parent-child node, then let's introduce the _savecheckstate function. If there is no such function page submit, other nodes other than the node, which has just been hand-click. Can't save status. So the function of this function is to save the status of all nodes (mainly automatically selected nodes), ensuring that the state of the tree after returning is still present. The following code describes the _saveCheckState function, the code is as follows:
Function _saveCheckstate (EL) {
IF (GetNodeIndex (EL))
QueueEvent ('Oncheck', GetNodeIndex (EL));
}
This method first checks if INDEX of the current node is valid, if it is valid, save the status. Here is what the QueueEvent method has done, the code I will not post, the actual meaning of this function is to save the client's operation in a hidden domain named __treeView1_state__, which is based on the backhabble This hidden domain, the state of the initialization tree. Where TreeView1 is the name of TreeView in the test system.
The final question is to deploy the problem, because the HTC is modified, so it needs to replace the original HTC file when deploying.
If you need to modify TreeView.htc (after formatting), you can change my message on the 9CBS left email. My 9CBS account is Cuike519.
I hope that Microsoft can add this feature to the TreeView control soon, it is best to implement a polymorphic tree structure. Please visit blog's comments, I will update the article in the comments!
