设置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;
}