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

 

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

http://blog.163.com/ganlanfei@126/blog/static/1218198712010101901813186/

有改动

    设置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即可，不用循环。

 

 

<script type="text/javascript">
        var backA_id = "";
        function GetNode() {
          if (event.srcElement.innerText == undefined || event.srcElement.innerText.length <= 0 || event.srcElement.nameProp == undefined)
                return true;
            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 = "white";
                    a.style.backgroundColor = "blue";
                    document.getElementById("List").src = a;
                }
            }
            else {
                a.style.color = "white";
                a.style.backgroundColor = "blue";
                document.getElementById("List").src = a;
            }
            backA_id = id;
            return false;
        }
    </script>