Asp.Net 2.0 的 TreeView 客户端个性化控制


文/mFrog 出处/博客园

  ASP.NET 2.0 的 TreeView 控件功能虽说强大,但其客户端控制很逊色,本文将讲解 TreeView 的客户端实现原理,并实现两个个性化操作:

  (1) 节点的全部打开和关闭;

  TreeNode Expand(or Collapse) all

  (2) 只打开一个节点(关闭其他兄弟节点)。

  just one node expanded(when a client expand one node all other will collaps)

  用记事本打开页面源代码,可以找到一下两个脚本引用:Code

  [copy to clipboard]CODE:

<script src="/WebUI/WebResource.axd?d=RAQeBcDUNuP9iuS8q3tNEw2&t=633300220640000000" type="text/javascript">
</script>
  
<script src="/WebUI/WebResource.axd?d=JuTdJhq3NM8Jq_RhssAkEg2&t=633300220640000000" type="text/javascript">
</script>

  将"/WebUI/WebResource.axd?d=RAQeBcDUNuP9iuS8q3tNEw2&t=633300220640000000"拷到地址栏尾,下载脚本,并以 .js 命名,另一个同样操作。分析第二个脚本文件,可以看到TreeView的很多客户端函数,其中关键的一个 TreeView_ToggleNode 就是客户端点击时触发的事件。

  要想做个性化的操作,就得从 TreeView_ToggleNode 事件下手。我们无法更改.net封装好的脚本,只有“重写”。所谓的重写就是在原来的函数之后添加一个同名函数(因为js对于同名函数只调用最后一个)。

  TreeView_ToggleNode 的原函数:Code

  [copy to clipboard]CODE:

function TreeView_ToggleNode(data, index, node, lineType,children){
  var img = node.childNodes[0];
  var newExpandState;
  try{
  if (children.style.display == "none"){
  children.style.display = "block";
  newExpandState = "e";
  if ((typeof(img) != "undefined") && (img != null)){
  if (lineType == "l"){
  img.src = data.images[15];
  }
  else if (lineType == "t"){
  img.src = data.images[12];
  }
  else if (lineType == "-"){
  img.src = data.images[18];
  }
  else{
  img.src = data.images[5];
  }
  img.alt = data.collapseToolTip.replace(//, TreeView_GetNodeText(node));
  }
  }
  else{
  children.style.display = "none";
  newExpandState = "c";
  if((typeof(img) != "undefined") && (img != null)){
  if(lineType == "l"){
  img.src = data.images[14];
  }
  else if(lineType == "t"){
  img.src = data.images[11];
  }
  else if(lineType == "-"){
  img.src = data.images[17];
  }
  else{
  img.src = data.images[4];
  }
  img.alt = data.expandToolTip.replace(//, TreeView_GetNodeText(node));
  }
  }
  }
  catch(e){}
  data
.expandState.value = data.expandState.value.substring(0, index) + newExpandState + data.expandState.value.slice(index + 1);

}

  1. 节点的全部打开和关闭:Code

  [copy to clipboard]CODE:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>LeftMenu_Tree</title>
</head>
<body bgcolor="#DDEDFD">
  <form id="form1" runat="server">
    <a href="javascript:TreeviewExpandCollapseAll('<%=TreeView1.ClientID%>', true)">Expand
      All</a> <a href="javascript:TreeviewExpandCollapseAll('<%=TreeView1.ClientID%>', false)">
        Collapse All</a>
    <asp:TreeView ID="TreeView1" SkinID="tvClass" runat="server" ShowLines="true" NodeWrap="false">
    </asp:TreeView>
  </form>
</body>
</html>
  
<script language="javascript">
//-----------------------------------------------------------------------------
function $(s)
function isNull(_sVal)
  
function TreeviewExpandCollapseAll(treeViewId, expandAll)
{
  var displayState = (expandAll == true ? "none" : "block");
  var treeView = $(treeViewId);
  if(treeView)
  {
    var treeLinks = treeView.getElementsByTagName("a");
    var nodeCount = treeLinks.length;
    var flag = true;
    for(i=0;i<nodeCount;i++)
    {
      if(treeLinks.firstChild.tagName)
      {
        if(treeLinks.firstChild.tagName.toLowerCase() == "img")
        {
          var node = treeLinks;
          var level = parseInt(node.id.substr(node.id.length - 1),10);
          var childContainer = GetParentByTagName("table", node).nextSibling;
          if(!isNull(childContainer))
          {
            if(flag)
            {
              if(childContainer.style.display == displayState)
              {
                TreeView_ToggleNode(eval(treeViewId +"_Data"),level,node,'r',childContainer);
              }
              flag = false;
            }
            else
            {
              if(childContainer.style.display == displayState)
              {
                TreeView_ToggleNode(eval(treeViewId +"_Data"),level,node,'l',childContainer);
              }
            }
          }
        }
      }
    }//for loop ends
  }
}
  
function GetParentByTagName(parentTagName, childElementObj)
{
  var parent = childElementObj.parentNode;
  while(parent.tagName.toLowerCase() != parentTagName.toLowerCase())
  {
    parent = parent.parentNode;
  }
  return parent;
}
//-----------------------------------------------------------------------------
</script>

 2. 只打开一个节点(关闭其他兄弟节点)Code

  [copy to clipboard]CODE:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>LeftMenu_Tree</title>
</head>
<body bgcolor="#DDEDFD">
  <form id="form1" runat="server">
    <a href="javascript:TreeviewExpandCollapseAll('<%=TreeView1.ClientID%>', true)">Expand
      All</a> , <a href="javascript:TreeviewExpandCollapseAll('<%=TreeView1.ClientID%>', false)">
        Collapse All</a>
    <asp:TreeView ID="TreeView1" SkinID="tvClass" runat="server" ShowLines="true" NodeWrap="false">
    </asp:TreeView>
  </form>
</body>
</html>

  <script language="javascript">

  //2. 只打开一个节点(关闭其他兄弟节点)------------------------------------------

function TreeView_ToggleNode(data, index, node, lineType, children) 
{
  var img = node.childNodes[0];
  var newExpandState;
  try {
    //***折叠兄弟节点------------------------
    CollapseBrothers(data,children);
    //---------------------------------------
    if (children.style.display == "none") 
    {
      children.style.display = "block";
      newExpandState = "e";
      if ((typeof(img) != "undefined") && (img != null)) 
      {
        if (lineType == "l") 
        {
          img.src = data.images[15];
        }
        else if (lineType == "t") 
        {
          img.src = data.images[12];
        }
        else if (lineType == "-") 
        {
          img.src = data.images[18];
        }
        else 
        {
          img.src = data.images[5];
        }
        img.alt = data.collapseToolTip.replace(//, TreeView_GetNodeText(node));
      }
    }
    else 
    {
      children.style.display = "none";
      newExpandState = "c";
      if ((typeof(img) != "undefined") && (img != null)) 
      {
        if (lineType == "l") 
        {
          img.src = data.images[14];
        }
        else if (lineType == "t") 
        {
          img.src = data.images[11];
        }
        else if (lineType == "-") 
        {
          img.src = data.images[17];
        }
        else 
        {
          img.src = data.images[4];
        }
        img.alt = data.expandToolTip.replace(//, TreeView_GetNodeText(node));
      }
    }
  }
  catch(e) {}
  data.expandState.value = data.expandState.value.substring(0, index) + newExpandState + data.expandState.value.slice(index + 1);
}

//折叠兄弟节点

function CollapseBrothers(data,childContainer)
{
  var parent = childContainer.parentNode;  
  for(i=0; i< parent.childNodes.length; i++)
  {
    if(parent.childNodes.tagName.toLowerCase() =="div")
    {
      if(parent.childNodes.id != childContainer.id)
      {
        parent.childNodes.style.display = "none"
      }
    }
    else if(parent.childNodes.tagName.toLowerCase() =="table")
    {
      var treeLinks = parent.childNodes.getElementsByTagName("a");      
      if(treeLinks.length > 2)
      {
        var j=0;
        if(treeLinks[j].firstChild.tagName)
        {
          if(treeLinks[j].firstChild.tagName.toLowerCase() == "img")
          {
            var img = treeLinks[j].firstChild;
            if(i==0) 
              img.src = data.images[8];
            else if(i==parent.childNodes.length-2) 
              img.src = data.images[14];
            else 
              img.src = data.images[11];
          }
        }  
      }
    }    
  }
}
//-----------------------------------------------------------------------------
</script>

 

本文作者:



相关阅读:
CSS+DIV网页重构对比TABLE布局的显着优势
JS和HTML分离:注册事件的方法进行封装
Webjx收集jQuery图片切换效果插件
IE8 中使用加速器(Activities)
jQuery 入门讲解1
jquery中动态效果小结
IIS信息服务器排错指导
NBearV3 Step by Step教程——IoC篇
如何通过ASP管理NT帐号
asp.net Context.Handler 页面间传值方法
Linux系统中如何实现系统ghost
FREEBSD升级及优化全攻略(1)
Linux/Unix数据自动备份工具
JSP高访问量下的计数程序
快速导航

Copyright © 2016 phpStudy |