创建自滚动的DataGrid
日期：2010-05-07 浏览次数：20427 次
在使用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 "
<S
<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 "
<S
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
