当前位置导航:炫浪网>>网络学院>>网页制作>>ASP.NET教程

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

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

  }

相关内容
赞助商链接