• 注册
  • 关于作者
    企业认证:趣记站长
    关注 6 粉丝 4 喜欢 9 内容 992
    江西省·南昌市
    聊天 送礼
    • 查看作者
    • asp.net 2.0 TreeView客户端个性化控制

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

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

        Client Side Expand/Collapse All Nodes For ASP.NET 2.0 TreeView.

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

        Just one expanded node in ASP.NET 2.0 TreeView (When a client expand one node all other will collaps)

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

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

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

        将"/WebUI/WebResource.axd?d=RAQeBcDUNuP9iuS8q3tNEw2& amp;t=633300220640000000"拷到地址栏尾,下载脚本,并以 .js 命名,

      ASP.NET中利用VWD操作数据库
      ASP.NET中的代码分离,探索ASP.NET中Tailspin TravelUI层奥秘,在Asp.net MVC中使用Repeater,ASP.NET中实现模版的动态加载,探讨ASP.NET MVC框架内置AJAX支持编程技术,Asp.net中防止用户多次登录的方法,asp.net的MVC编程、MV编程以及URL重写,ASP.NET图片盗链问题,ASP.NET缓存:方法分析和实践示例,ASP.NET 仿MSN Messenger Alert的弹出窗口控件,ASP.NET中利用VWD操作数据库,Asp.Net中带图片的重填按钮,asp.net 2.0 TreeView客户端个性化控制,如何在.Net 中把图片存入数据库,ASP.NET AJAX框架开发幻灯片播放网页,ASP.NET AJAX框架开发幻灯片播放网页,asp.net在线压缩和解压缩的实现,ASP.NET的Postback,Asp.net中服务端控件事件是如何触发的,ASP.NET创建文件并写入内容
      ASP.net

      另一个同样操作。分析第二个脚本文件,可以看到TreeView的很多客户端函数,其中关键的一个 TreeView_ToggleNode 就是客户端点击时触发的事件。

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

        TreeView_ToggleNode 的原函数:

      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(/\{0\}/, 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(/\{0\}/, TreeView_GetNodeText(node));

      }

      }

      }

      catch(e) {}

      data.expandState.value =  data.expandState.value.substring(0, index) + newExpandState + data.expandState.value.slice(index + 1);

      }

        节点的全部打开和关闭(Client Side Expand/Collapse All Nodes)

      <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){return document.getElementById(s);}

      function isNull(_sVal){return (_sVal == "" || _sVal == null || _sVal == "undefined");}

      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[i].firstChild.tagName)

      {

      if(treeLinks[i].firstChild.tagName.toLowerCase() == "img")

      {

      var node = treeLinks[i];

      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. 只打开一个节点,关闭其他兄弟节点(Just one expanded node, all other will collaps)

      <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. 只打开一个节点,关闭其他兄弟节点(Just one expanded node, all other will collaps)

      function TreeView_ToggleNode(data, index, node, lineType, children)

      {

      var img = node.childNodes[0];

      var newExpandState;

      try {

      //***折叠兄弟节点(Collapse Brothers)-----

              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(/\{0\}/, 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(/\{0\}/, TreeView_GetNodeText(node));

      }

      }

      }

      catch(e) {}

      data.expandState.value =  data.expandState.value.substring(0, index) + newExpandState + data.expandState.value.slice(index + 1);

      }

      //折叠兄弟节点(Collapse Brothers)

      function CollapseBrothers(data,childContainer)

      {

      var parent = childContainer.parentNode;

      for(i=0; i< parent.childNodes.length; i++)

      {

      if(parent.childNodes[i].tagName.toLowerCase() =="div")

      {

      if(parent.childNodes[i].id != childContainer.id)

      {

      parent.childNodes[i].style.display = "none"

      }

      }

      else if(parent.childNodes[i].tagName.toLowerCase() =="table")

      {

      var treeLinks = parent.childNodes[i].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>

      Asp.Net中带图片的重填按钮
      ASP.NET中的代码分离,探索ASP.NET中Tailspin TravelUI层奥秘,在Asp.net MVC中使用Repeater,ASP.NET中实现模版的动态加载,探讨ASP.NET MVC框架内置AJAX支持编程技术,Asp.net中防止用户多次登录的方法,asp.net的MVC编程、MV编程以及URL重写,ASP.NET图片盗链问题,ASP.NET缓存:方法分析和实践示例,ASP.NET 仿MSN Messenger Alert的弹出窗口控件,ASP.NET中利用VWD操作数据库,Asp.Net中带图片的重填按钮,asp.net 2.0 TreeView客户端个性化控制,如何在.Net 中把图片存入数据库,ASP.NET AJAX框架开发幻灯片播放网页,ASP.NET AJAX框架开发幻灯片播放网页,asp.net在线压缩和解压缩的实现,ASP.NET的Postback,Asp.net中服务端控件事件是如何触发的,ASP.NET创建文件并写入内容
      ASP.net

    • 0
    • 0
    • 0
    • 87
    • 单栏布局 侧栏位置: