GOTO: ASP. NET TreeView checkchanged Event Discussion

http://blog.csdn.net/xiage/article/details/5128755

A similar problem can often be encountered in development: to select or deselect all child nodes through the treenodecheckchanged event of a tree parent node (provided that the checkbox of the TreeView is set), to implement its own operational functions. So our normal thinking prompted us to look for the "checkchanged" event in the TreeView, and it was easy for us to find the event "treenodecheckchanged". We are very relaxed and elegant writing the implementation code of the event, the psychology is very grateful to Microsoft, ah real convenient for me to develop Ah, what has what, on the poor secretly laughed out (:-D).

Just as we were on the happy head, we found that when we clicked on the triangle to run the page, clicking on the parent node was not reversed by the selected item. I thought it was a mouse problem. Then click on the parent node again, there is no result we want. This is where we may refresh the page and try again, and the result is not what we want it to look like.

Accustomed to the ready-made things, now suddenly a little accident, very disappointing. But the project couldn't stop, so we started analyzing the code, checking it several times and discovering that the code was fine. We started Google. Well, I found out why. It is only when the page submits that the change is submitted, which is also a problem-solving direction. But we want to change it when we're not submitting the page, and we're thinking of using JavaScript to solve the problem.

This is the TreeView we're going to be working on, and when I want to click on a level node, I want to select two level two nodes. Such as.

Starting with viewing the HTML code for the TreeView, the code generated on the page resembles the following (the code is too much for me to tidy up):

A TreeView starts with an anchor point.

< a href = "#TreeView1_SkipLink" >

< img alt = "Skip navigation links." "width =" 0 "height =" 0 "style =" border-width:0px; "/></a >

Then there is a node container div (TreeView1), where all the nodes are placed.

< div id = "TreeView1" onclick= "Ontreeviewclick (event);" style = "font-size:12px;" >

A tree node is represented in HTML by a table tag, and a node is a table. So the following table, named "First-level node", is a node of the tree.

< table cellpadding = "0" cellspacing = "0" style = "border-width:0;" >

< tr >

< td >

< a id = "treeview1n0" href = "javascript:treeview_togglenode (...)" >

< img src = "... "alt =" Collapse one-level node "style =" border-width:0; "/></a ></td>

< td >

< a href = "javascript:treeview_togglenode (...)" id = "treeview1t0i" TabIndex = "1" >

< img src = "image/folderopen.gif" alt = "style =" border-width:0; "/></a ></td >

< td class = "treeview1_2" style = "white-space:nowrap;" >

< input type = "checkbox" name = "Treeview1n0checkbox" id = "Treeview1n0checkbox" title = "First-level node"/>

< a id = "treeview1t0" > First-level node </a ></td >

</TR >

</table >

Immediately following is the child node (if any), the child node is the div containment. We look at the ID of this div, the first half of "Treeview1n0" and the parent node above is not a lot of the same, so you can see the node naming rules of the TreeView. This is important.

< div id = "Treeview1n0nodes" style = "display:block;" >

Child nodes
< table cellpadding = "0" cellspacing = "0" style = "border-width:0;" >

< tr >

< td >

< div style = "width:20px; height:1px ">

</div >

</td >

< td >

< img src = "... "alt =" "/></td >

< td >

< a onclick = "Javascript:treeview_selectnode (treeview1_data, this, ' treeview1t1 ');"

id = "Treeview1t1i" TabIndex = "1" >

< img src = "image/file.gif" alt = "style =" border-width:0; "/></a ></td >

< td class = "treeview1_2" style = "white-space:nowrap;" >

< input type = "checkbox" name = "Treeview1n1checkbox" id = "Treeview1n1checkbox" title = "Level Two node"/>

< a id = "TREEVIEW1T1" > Level two node 1</a ></td >

</TR >

</table >

Child nodes
< table cellpadding = "0" cellspacing = "0" style = "border-width:0;" >

< tr >

< td >

< div style = "width:20px; height:1px ">

</div >

</td >

< td >

< img src = "... "alt =" "/></td >

< td >

< a onclick = "javascript:treeview_selectnode (...)", "id =" Treeview1t2i "tabindex="-1 ">

< img src = "image/file.gif" alt = "style =" border-width:0; "/></a ></td >

< td class = "treeview1_2" style = "white-space:nowrap;" >

< input type = "checkbox" name = "Treeview1n2checkbox" id = "Treeview1n2checkbox" title = "Level Two node"/>

< a id = "TREEVIEW1T2" > Level two node 2</a ></td >

</TR >

</table >

</div >

We see this here seems to understand a lot, check and uncheck we can actually be done by the operation of these HTML tags (in fact, we know that the TreeView is also manipulating these HTML tags, the resulting script was removed by me, that is, through these scripts to operate).

The first thing to do is to add an onclick event onclick = "Ontreeviewclick" to the TreeView, which is in response to the CheckChanged event, such as the red Bold code above.

We define an object to receive a checkbox that is triggered by our order, and here we write more code to consider the compatibility of the browser.

EVT = EVT | | window.event;

var obj = (evt.target)? Evt.target:evt.srcElement;

EVT is passed in as a parameter (applies in Firefox).

At this point, obj is not sure if it is a checkbox, so let's add a judgment.

if (Obj.tagname = = "INPUT" && obj.type = = "checkbox") {

//...

}

At this point, obj is the CheckBox object, we continue to look down.

if (Obj.tagname = = "INPUT" && obj.type = = "checkbox")

{

var node = obj.parentNode.parentNode.parentNode.parentNode.nextSibling;

TD TR TBODY TABLE DIV (container for child nodes)

var node = document.getElementById (Obj.id.replace ("checkbox", "Nodes"));

VAR nodes;

if (node) {

nodes = Node.getelementsbytagname ("INPUT");

for (var j = 0; j<nodes.length; j + +) {

if (Nodes[j].type = = "checkbox") {

nodes[j].checked = obj.checked;

}

}

}

}

Come to see this sentence

var node = document.getElementById (Obj.id.replace ("checkbox", "Nodes"));

This code is the container that gets the child nodes of the current node, which we discussed above

< div id = "Treeview1n0nodes" style = "display:block;" The difference between the ID of this container and the ID of the current CheckBox is the following "Nodes" and "checkbox", which we can do on the basis of this rule. Then we can find all the checkboxes in this DIV: getElementsByTagName ("INPUT"), then select all the checkboxes for the selected rice.

Notice that there is a commented out code, this code and the above analysis of the acquisition of sub-nodes can be said to be the same, the first time I most directly think of this method. The elements of each parentnode are represented in the table below.

The whole method is given below.

function Ontreeviewclick (EVT)

{

EVT = EVT | | window.event;

var obj = (evt.target)? Evt.target:evt.srcElement;

if (Obj.tagname = = "INPUT" && obj.type = = "checkbox")

{

var node = obj.parentNode.parentNode.parentNode.parentNode.nextSibling;

TD TR TBODY TABLE DIV (container for child nodes)

alert (obj.parentNode.parentNode.parentNode.tagName);

var node = document.getElementById (Obj.id.replace ("checkbox", "Nodes"));

VAR nodes;

if (node) {

nodes = Node.getelementsbytagname ("INPUT");

for (var j = 0; j<nodes.length; j + +) {

if (Nodes[j].type = = "checkbox") {

nodes[j].checked = obj.checked;

}

}

}

}

}

Well, this basically satisfies our needs.

GOTO: ASP. NET TreeView checkchanged Event Discussion