设置无刷新TreeView选中节点样式

本文欢迎转载,但必须在文章显眼处保留原文地址

http://www.cnblogs.com/Ss_Andy/archive/2010/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;

}