繁体中文
设为首页
加入收藏
当前位置:.Net技术首页 >> Asp.Net开发 >> 数据回发时,维护ASP.NET Tree控件位置 2

数据回发时,维护ASP.NET Tree控件位置 2

2007-10-15 08:00:00  作者:  来源:互联网  浏览次数:0  文字大小:【】【】【
简介:有了这些知识,你就知道该怎么做了,基本方法是隐藏的Input是一个textbox,我们要做的就是知道将来呈献的内容。一个TreeView最终呈现为HTML表格,节点的值被用来作为单元格的值,<TD>元素呈现节点名称,所以通过查...

有了这些知识,你就知道该怎么做了,基本方法是隐藏的Input是一个textbox,我们要做的就是知道将来呈献的内容。一个TreeView最终呈现为HTML表格,节点的值被用来作为单元格的值,<TD>元素呈现节点名称,所以通过查找单元格ID并滚动到那里.

  为了具体说明做法,我使用TreeView编写了一些代码,在Page_Load时间里加载一段脚本来找到需要的单元格(参考下表),在<body>的onload时间里调用该函数.

Imports System.Collections.Generic

Partial Class _Default

Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, _

ByVal e As System.EventArgs) Handles Me.Load

InjectLoadEvent()

If (IsPostBack) Then Return

TreeView1.Nodes.Clear()

Dim chicken As New TreeNode("Chicken")

 TreeView1.Nodes.Add(chicken)

 Dim beef As New TreeNode("Beef")

 TreeView1.Nodes.Add(beef)

 Dim pork As New TreeNode("Pork")

 TreeView1.Nodes.Add(pork)

 Dim fish As New TreeNode("Fish")

 TreeView1.Nodes.Add(fish)

 chicken.ChildNodes.Add(New TreeNode("Crepes Florentine with Buffalo Chicken"))

 fish.ChildNodes.Add(New TreeNode("Linguine with White Clam Sauce"))

 pork.ChildNodes.Add(New TreeNode("Pork Loin with Peanut and Madarin Orange Sauce"))

 beef.ChildNodes.Add(New TreeNode("Standing Rib Roast with Fennel and Blue Cheese Potatoes"))

 ' We need a bunch of stuff here so we will add some stubs

 Dim I As Integer

 For I = 1 To 50

  chicken.ChildNodes.Add(New TreeNode("Placeholder " + I.ToString()))

  fish.ChildNodes.Add(New TreeNode("Placeholder " + I.ToString()))

  pork.ChildNodes.Add(New TreeNode("Placeholder " + I.ToString()))

  beef.ChildNodes.Add(New TreeNode("Placeholder " + I.ToString()))

 Next

 TreeView1.CollapseAll()

End Sub

Public Sub InjectLoadEvent()

 Dim script As String = _

   "function LoadEvent()" + _

   "{{" + _

   " try" + _

   " {{" + _

   " var elem = document.getElementById('{0}_SelectedNode');" + _

   " if(elem != null )" + _

   " {{" + _

   " var node = document.getElementById(elem.value);" + _

   " if(node != null)" + _

   " {{" + _

   " node.scrollIntoView(true);" + _

   " {1}.scrollLeft = 0;" + _

   " }}" + _

  " }}" + _

 " }}" + _

 " catch(oException)" + _

 " {{}}" + _

 "}}"

Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "LoadEvent", _

String.Format(script, TreeView1.ClientID, Panel1.ClientID), True)

 End Sub

End Class

  下面的代码显示了页面的布局:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.ASPx.vb" Inherits="_Default" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd">

<HTML XMLns="http://www.w3.org/1999/xHTML" >

<head runat="server">

 <title>Focus Tree Node on Postback</title>

</head>

<body onload="LoadEvent()">

 <form id="form1" runat="server">

  <div>

   <ASP:Panel ID="Panel1" runat="server" Height="200px" Width="200px" ScrollBars="Both">

    <ASP:TreeView ID="TreeView1" runat="server">

     <SelectedNodeStyle BackColor="#8080FF" />

    </ASP:TreeView>

   </ASP:Panel>

  </div>

 </form>

</body>

</HTML>

  下图显示了本例子运行的结果

最后,下面的代码显示了JavaScript的注入方式:

<script>

function LoadEvent()

{

 try

 {

  var elem = document.getElementById('TreeView1_SelectedNode');

  if(elem != null )

  {

   var node = document.getElementById(elem.value);

   if(node != null)

   {

    node.scrollIntoView(true);

    Panel1.scrollLeft = 0;

   }

  }

 }

 catch(oException)

 {}

}// -->

</script>

  用JavaScript定义的LoadEvent函数将查找隐藏字段,我们利用TreeView控件的ClientID 查找所有元素,不过,在嵌套多个TreeView控件后,名称将变得非常长.找到单元格的值后,我使用scrollIntoView方法.scrollLeft属性将让滚动条滚动当前位置.

做人要厚道,请注明转自酷网动力(www.ASPCOOL.COM)。

责任编辑:admin
相关文章