300分,,,求"创建固定表头、表格体滚动的DataGrid"代码(决不食言)

cuike519写的方法,我尝试自己做过了,,,但之前我没有"自定义控件"制作的经验,,,最终没能看懂.

在使用DataGrid时，如果页面很长，可能需要用户自己来拉动滚动条，下面的例子实现了自动滚动的功能。其基本原理就是利用了LinkButton的锚点的功能，如果使用PushButton，那还必须自己添加锚点。另外必须弄明白的是Page的PostBack时的客户端脚本：<script language="javascript">

</script>这段脚本中__doPostBack函数有两个参数：第一个eventTarget是触发PostBack的控件的UniqueID；第二参数eventArgument是一个对象，包含PostBack的额外信息。因此我们使用UniqueID来作为锚点的值。源代码如下：查看例子DataGridAutoScroll.aspx<%@ Page Language="vb" AutoEventWireup="false" Codebehind="DataGridAutoScroll.aspx.vb"
Inherits="aspxWeb.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.NET 7.0">
    <meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
    <meta name="vs_defaultClientScript" content="JavaScript">
    <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.vbImports System
Imports System.Web
Imports System.Web.UI.WebControls
Imports System.Collections
Imports System.Data
Imports System.Data.SqlClientPublic 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

对不起，我有的，我是做成一个控件的，我不能发给你，公司秘密不过我提示你一下，我贴部分代码给你
也就是在RENDER中写

divStyle = "<DIV id='" & Me.ID & "_DivRight' style='OVERFLOW-X: scroll; WIDTH: " & _
                            width & ";" & _
                " BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; " & _
                            "' ms_positioning = 'GridLayout' > "
        output.Write(divStyle)说白了
也就是在DATAGRID后加DIV，然后用DIV的滚动条

divStyle = "<DIV id='" & Me.ID & "_DivBottom' style='OVERFLOW-Y: scroll; HEIGHT: " & _
                            height & ";" & _
                " BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; " & _
                            "' ms_positioning = 'GridLayout' > "
        output.Write(divStyle)

完成创建固定表头、表格体滚动的DataGrid 功能主要是下面这个方法
你把其他都去了
function makeScrollableTable(tbl,scrollFooter,height){
    var c, pNode, hdr, ftr, wrapper, rect;    if (typeof tbl == 'string') tbl = document.getElementById(tbl);    pNode = tbl.parentNode;
    fixTableWidth(tbl);    c = container.length;
    container[c] = document.createElement('<SPAN style="height: 100; overflow: auto;">');
    container[c].id = tbl.id + "Container";
    pNode.insertBefore(container[c], tbl);
    container[c].appendChild(tbl);
    container[c].style.width = tbl.clientWidth + 2 * tbl.clientLeft + scrollbarWidth();    hdr = tbl.cloneNode(false);
    hdr.id += 'Header';
    hdr.appendChild(tbl.tHead.cloneNode(true));
    tbl.tHead.style.display = 'none';    if (!scrollFooter || !tbl.tFoot){
        ftr = document.createElement('<SPAN style="width:1;height:1;clip: rect(0 1 1 0);background-color:transparent;">');
        ftr.id = tbl.id + 'Footer';
        ftr.style.border = tbl.style.border;
        ftr.style.width = getActualWidth(tbl) + 2 * tbl.clientLeft;
        ftr.style.borderBottom = ftr.style.borderLeft = ftr.style.borderRight = 'none';
    }else{
        ftr = tbl.cloneNode(false);
        ftr.id += 'Footer';
        ftr.appendChild(tbl.tFoot.cloneNode(true));
        ftr.style.borderTop = 'none';
        tbl.tFoot.style.display = 'none';
    }    wrapper = document.createElement('<table border=0 cellspacing=0 cellpadding=0>');
    wrapper.id = tbl.id + 'Wrapper';
    pNode.insertBefore(wrapper, container[c]);    wrapper.insertRow(0).insertCell(0).appendChild(hdr);
    wrapper.insertRow(1).insertCell(0).appendChild(container[c]);
    wrapper.insertRow(2).insertCell(0).appendChild(ftr);    wrapper.align = tbl.align;
    tbl.align = hdr.align = ftr.align = 'left';
    hdr.style.borderBottom = 'none';
    tbl.style.borderTop = tbl.style.borderBottom = 'none';    // adjust page size
    if (c == 0 && height == 'auto'){
        onResizeAdjustTable();
        onResizeHandler = window.onresize;
        window.onresize = onResizeAdjustTable;
    }else{
        container[c].style.height = height;
    }
}

用table做个假表头,把datagrid放到div里,可以实现

注:那么多代码我看不懂啊,,,能否直接发给我一个例子[email protected]

Me.ShowHeader = False
               MyBase.Render(output)
        Me.ShowHeader = Trueoutput.Write("</DIV>")
        output.Write("</td>")
关键就是在这里，就是竖的滚动条，一定要先Me.ShowHeader = False
然后MyBase.Render(output) 在Me.ShowHeader = True
呵呵
这个方法比较的好

参考http://www.foxhis.com/powermjtest/
如果这个不行，在网上还见过一种使用两个表格固定的方式实现的，基本原理是：
上面一个表格和要输出的表格的题头是一样的（只有一行），这个表格下面有一个div可以保证滚动效果，DataGrid就放在这个div里面。

XP 风格的可拖动列、可排序、可改变宽度的DataGrid的例子http://dotnet.aspx.cc/ShowDetail.aspx?id=00C78024-5C08-4F3F-BCA8-AB3C0B330A12

http://blog.csdn.net/shoutor/archive/2004/07/13/40241.aspx

我觉得还是前面的朋友说的方法比较简单
用表格作固定表头
把DataGrid设置成不用表头并放在Div中

把DataGrid设置成不用表头并放在Div中

完了,,,忘记注明要C#的啦,,,VB我看不懂呀

http://www.developerfusion.com/utilities/convertvbtocsharp.aspx

用Infragistics.WebUI.UltraWebGrid.v3.1控件

http://community.csdn.net/Expert/TopicView.asp?id=3203479

我曾经做了个这种控件，实现的关键代码很简单也很巧妙，就一行，需要可以与我联系：[email protected]我们的网站：www.evget.com (慧都控件网)

===我是楼主,,,
请大家不要贴其它方法的代码了.我要用这种方法的(自定义控件):
http://blog.csdn.net/cuike519/archive/2004/03/25/19336.aspx
谢谢.

我有一种方法，提供大家参考。
原理：利用Div和标题行的绝对位置来控制固定表头。
首先，在页面有这样一段js脚本：
<script language="javascript" type="text/javascript">
function ScrollChange()
{
try
{
var objTitle =document.getElementById("dgdItemAnalyse_trTitle");
var objDiv = document.getElementById("divContain");
objTitle.style.position = "absolute";
objTitle.style.top = objDiv.scrollTop + 2;
}
catch(e){}
}
</script>DataGrid的设置：
<div style="OVERFLOW:auto;WIDTH:785px;HEIGHT:365px" onscroll="ScrollChange()" id="divContain">
<asp:DataGrid id="dgdItemAnalyse" runat="server" BorderColor="white" CellPadding="1" CellSpacing="1" BorderWidth="1" ItemStyle-BorderWidth="1px" ItemStyle-BorderStyle="Solid">
<ItemStyle Width="200px"></ItemStyle>
<HeaderStyle HorizontalAlign="Center" BackColor="#CCCCCC"></HeaderStyle>
</asp:DataGrid>
</div>
.CS中的操作（DataGrid绑定事件）：
private void dgdItemAnalyse_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if(e.Item.ItemIndex == -1 )//标题
{
e.Item.ID = "trTitle";
e.Item.Style["Position"] = "absolute";
e.Item.Style["z-index"] = "1000";
}
else
{
e.Item.Style["top"] = "25px";
e.Item.Style["Position"] = "relative";
} e.Item.Height = 25;
}

你麻烦了
500分给我，这个是我参考其他人的代码想得到的最简单的固定表头的代码
CSS和一句话搞定。
http://www.blogcn.com/User10/songsgroup/index.html
记得把表放在div当中，整个表的大小就是div高度，这个简单。也有其他的办法
麻烦。

调试易

300分,,,求"创建固定表头、表格体滚动的DataGrid"代码(决不食言)

解决方案 »