本文欢迎转载,但必须在文章显眼处保留原文地址
/Ss_Andy/archive//11/19/1881680.html
设置treeView节点的样子很简单，因为微软已经帮我们做了很多，比如RootNodeStyle，ParentNodeStyle ，LeafNodeStyle，SelectedNodeStyle，HoverNodeStyle。有兴趣的朋友可以随便设置一下，打开页面浏览看看，应该还不错吧！呵呵！ 不过上面的那些属性，部分是在需要页面回抛的情况下才起效果，比如SelectNodeStyle，如果TreeView选择节点是无刷新的话，那这时你会发现，虽然设置了SelectNodeStyle，但就是没有效果。刚开始不知道，后面发现需要把节点的selected属性设置成true才可以看到样式。可是我们要考虑用户的体验呀，不能说随便点一下都刷新页面。 其实我们都知道，每个节点都是一个<A>标记，这时我们可以把把改变样式的做法放在客户端，自己用js完成，应该也是相当简单的！ 1.选择节点的时候，触发js函数，在页面后台代码load的时候，加上这句话！ treeViewNav.Attributes.Add("onclick ", "javascript:return GetNode(); "); 2.在js函数里面先取得触发事件的A标记的ID； var id = event.srcElement.id; var a = document.getElementById(id); 3.然后更改这个a标记的样式(PS:不能直接设置className属性，因为他本身就有className) a.style.color = "#FF99CC"; a.style.backgroundColor = "#5FCBD3";
这时你会发现，点击第一个节点后，再点击另一个节点，第一个点节的样式还存在！我们想要的效果应该是点击第二个节点时，第一个节点的样式回到和原来默认的一样！ 这时有两种方式 1、查出界面上所有节点，然后循环所有节点，把样式都设置成默认的 2、在点击第一个节点的时候，将这个节点的ID保留起来，然后点击第二次的时候，就直接获取上一次节点的ID，只要设置上一个节点的ID即可，不用循环。
下面我贴出具体的代码吧！
//获取treeview的节点值 var backA_id = ""; function GetNode() { if (event.srcElement.innerText == undefined || event.srcElement.innerText.length <= 0 || event.srcElement.nameProp == undefined) return true; aspxgvWage.PerformCallback(event.srcElement.nameProp); //你可以无视我这句代码，这是我项目里面的代码，去完成一个具体的业务 var id = event.srcElement.id; var a = document.getElementById(id); if (backA_id != "") { if (backA_id == id) { } else { var backa = document.getElementById(backA_id); if (backa != undefined) { backa.style.color = ""; //恢复默认 backa.style.backgroundColor = ""; //恢复默认 } var a = document.getElementById(id); a.style.color = "#FF99CC"; a.style.backgroundColor = "#5FCBD3"; } } else { a.style.color = "#FF99CC"; a.style.backgroundColor = "#5FCBD3"; } backA_id = id; return false; }
