建立自滾動的DataGrid

來源:互聯網
上載者:User
datagrid|建立    在使用DataGrid時,如果頁面很長,可能需要使用者自己來拉動捲軸,下面的例子實現了自動滾動的功能。其基本原理就是利用了LinkButton的錨點的功能,如果使用PushButton,那還必須自己添加錨點。另外必須弄明白的是Page的PostBack時的用戶端指令碼:
  
  <script language="<a href="http://dev.21tx.com/web/javascript/" target="_blank">JavaScript</a>">
  <!--
   function __doPostBack(eventTarget, eventArgument) {
   var theform = document.Form1;
   theform.__EVENTTARGET.value = eventTarget;
   theform.__EVENTARGUMENT.value = eventArgument;
   theform.submit();
   }
  // -->
  </script>
  
  這段指令碼中__doPostBack函數有兩個參數:第一個eventTarget是觸發PostBack的控制項的UniqueID;第二參數eventArgument是一個對象,包含PostBack的額外資訊。因此我們使用UniqueID來作為錨點的值。
  
  原始碼如下:
  
  查看例子
  
  DataGridAutoScroll.ASPx
  
  <%@ Page Language="<a href="http://dev.21tx.com/language/vb/" target="_blank">VB</a>" AutoEventWireup="false" Codebehind="DataGridAutoScroll.aspx.vb"
   Inherits="aspx<a href="http://dev.21tx.com/web/" target="_blank">Web</a>.DataGridAutoScroll"%>
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  <HTML>
   <HEAD>
   <title runat="server" id="mengxianhui"></title>
   <meta name="GENERATOR" content="Microsoft Visual Studio<a href="http://dev.21tx.com/dotnet/" target="_blank">.net</a> 7.0">
   <meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
   <meta name="vs_defaultClientScript" content="<a href="http://dev.21tx.com/java/" target="_blank">Java</a>Script">
   <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
   </HEAD>
   <body>
   <form id="Form1" method="post" runat="server">
   <asp:DataGrid id="DataGrid1" runat="server" BorderColor="#CC9966" BorderStyle="None"
   BorderWidth="1px" BackColor="White" CellPadding="4">
   <SelectedItemStyle Font-Bold="True" ForeColor="#663399" BackColor="#FFCC66"></SelectedItemStyle>
   <ItemStyle ForeColor="#330099" BackColor="White"></ItemStyle>
   <HeaderStyle Font-Bold="True" ForeColor="#FFFFCC" BackColor="#990000"></HeaderStyle>
   <FooterStyle ForeColor="#330099" BackColor="#FFFFCC"></FooterStyle>
   <Columns>
   <asp:EditCommandColumn ButtonType="LinkButton" UpdateText="Update"
   CancelText="Cancel" EditText="Edit"></asp:EditCommandColumn>
   </Columns>
   <PagerStyle HorizontalAlign="Center" ForeColor="#330099" BackColor="#FFFFCC"></PagerStyle>
   </asp:DataGrid>
   </form>
   </body>
  </HTML>
  
  代碼:DataGridAutoScroll.aspx.vb
  
  Imports System
  Imports System.Web
  Imports System.Web.UI.WebControls
  Imports System.Collections
  Imports System.Data
  Imports System.Data.SqlClient
  
  Public Class DataGridAutoScroll
   Inherits System.Web.UI.Page
   Protected WithEvents DataGrid1 As System.Web.UI.WebControls.DataGrid
   Protected mengxianhui As New HtmlGenericControl()
  
  #Region " Web Form Designer Generated Code "
   <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
   End Sub
  
   Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
   InitializeComponent()
   End Sub
  
  #End Region
  
   Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
   mengxianhui.InnerText = "【孟憲會之精彩世界】之.NET開發人員園地"
   If Not Page.IsPostBack Then
   DataGrid1.DataSource = CreateDataSource()
   DataGrid1.DataBind()
   Else
   Dim startUpScript As String
   startUpScript = "<script language=Javascript>location.href='#" _
   & Request.Form("__EVENTTARGET") & "';</script>"
   Me.RegisterStartupScript(Me.UniqueID & "StartUp", startUpScript)
   End If
  
   End Sub
  
   Function CreateDataSource() As ICollection
  
   Dim dt As DataTable
   Dim dr As DataRow
   Dim i As Integer
  
   '建立 DataTable
   dt = New DataTable()
   dt.Columns.Add(New DataColumn("字元型值", GetType(String)))
   dt.Columns.Add(New DataColumn("布爾型值", GetType(Boolean)))
   dt.Columns.Add(New DataColumn("貨幣型值", GetType(Double)))
  
   '樣本資料
   For i = 1 To 150
   dr = dt.NewRow()
   dr(0) = "Item " + i.ToString()
   If (i Mod 2 <> 0) Then
   dr(1) = True
   Else
   dr(1) = False
   End If
   dr(2) = 1.23 * (i + 1)
   '向datatable添加 row
   dt.Rows.Add(dr)
   Next
  
   '返回DataTable的DataView
   CreateDataSource = New DataView(dt)
  
   End Function
  
   Private Sub DataGrid1_ItemDataBound(ByVal sender As Object, _
   ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles DataGrid1.ItemDataBound
   Select Case e.Item.ItemType
   Case ListItemType.Item, ListItemType.AlternatingItem
   Dim editButton As LinkButton = New LinkButton()
   editButton = CType(e.Item.Cells(0).Controls(0), LinkButton)
   editButton.Attributes.Add("name", "#" & editButton.UniqueID)
  
   Case ListItemType.EditItem
   Dim UpdateButton As LinkButton = New LinkButton()
   UpdateButton = CType(e.Item.Cells(0).Controls(0), LinkButton)
   UpdateButton.Attributes.Add("name", "#" & UpdateButton.UniqueID)
   End Select
   End Sub
  
   Private Sub DataGrid1_EditCommand(ByVal source As Object, _
   ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles DataGrid1.EditCommand
   DataGrid1.EditItemIndex = e.Item.ItemIndex
   DataGrid1.DataSource = CreateDataSource()
   DataGrid1.DataBind()
   End Sub
  
   Private Sub DataGrid1_CancelCommand(ByVal source As Object, _
   ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles DataGrid1.CancelCommand
   DataGrid1.EditItemIndex = -1
   DataGrid1.DataSource = CreateDataSource()
   DataGrid1.DataBind()
   End Sub
  
   Private Sub DataGrid1_UpdateCommand(ByVal source As Object, _
   ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs) Handles DataGrid1.UpdateCommand
   DataGrid1.EditItemIndex = -1
   DataGrid1.DataSource = CreateDataSource()
   DataGrid1.DataBind()
   End Sub
  End Class

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.