Implementation of ASP.net 2.0 's TreeView client Personalization control

ASP.net 2.0 's TreeView control feature is powerful, but its client control is inferior, this article will explain the TreeView's client implementation principle, and implement two personalization operations:

(1) All nodes are opened and closed;

TreeNode Expand (or Collapse) all

(2) Open only one node (close other sibling nodes).

Just one node expanded (when a client expand one node all other would collaps)

Using Notepad to open the page source code, you can find two script references: code

[Copy to Clipboard] CODE:

<script src="/WebUI/WebResource.axd?d=RAQeBcDUNuP9iuS8q3tNEw2&t=633300220640000000" type="text/javascript">
</script>

<script src="/WebUI/WebResource.axd?d=JuTdJhq3NM8Jq_RhssAkEg2&t=633300220640000000" type="text/javascript">
</script>

Copy "/webui/webresource.axd?d=raqebcdunup9ius8q3tnew2&t=633300220640000000" to the end of the address bar, download the script, and name it with. JS, and the other same operation. Analyzing the second script file, you can see many client functions of the TreeView, one of the key Treeview_togglenode is the event triggered when the client clicks.

To do personalized operation, you have to start from the Treeview_togglenode incident. We cannot change the. NET encapsulated script, only "rewrite". The so-called rewrite is to add a function with the same name after the original function (because JS only calls the last one for the function with the same name).

Treeview_togglenode's original function: Code

[Copy to Clipboard] CODE:

function Treeview_togglenode (data, Index, node, linetype, children) {
var img = node.childnodes[0];
var n Ewexpandstate;
try {
if (Children.style.display = = "None") {
Children.style.display = "block";
Newexpandstate = "E";
if ((typeof (IMG)!= "undefined") && (img!= null)) {
if (Linetype = = "L") {
Img.src = data.images[15];

Else if (Linetype = = "T") {
Img.src = data.images[12];
}
Else if (Linetype = "-") {
Img.src = data.images[18];
}
Else {
Img.src = data.images[5];
}
Img.alt = Data.collapseToolTip.replace (/\{0\}/, Treeview_getnodetext (node));
}
}
else {
Children.style.display = "None";
Newexpandstate = "C";
if (typeof (IMG)!= "undefined" && (img!= null)) {
if (Linetype = = "L") {
Img.src = data.images[14];
}
Else if (Linetype = = "T") {
Img.src = data.images[11];
}
Else if (Linetype = "-") {
Img.src = data.images[17];

Else {
Img.src = data.images[4];
}
Img.alt = Data.expandToolTip.replace (/\{0\}/, Treeview_getnodetext (node));
}
}
}
catch (e) {}
Data.expandState.value = data.expandState.value.substring (0, index) + Newexpandsta Te + data.expandState.value.slice (index + 1);
}