具有固定页眉和滚动条的 GridView

• 下载源代码 - 66 KB

引言

GridView 是任何开发人员在使用 Web 应用程序与数据库交互时，在 Visual Studio 中使用最多的数据绑定控件之一。 有时，我们需要在一个小的空间或 Web 表单的一部分中显示大量数据。 我们将在这里制作一个可滚动的 GridView 。 稍后，我们将添加一个必备功能，即 GridView 中的固定标题。 即使我们滚动 GridView，标题也将保留在顶部并始终可见。

要求

技术要求

• Visual Web Developer 或 Visual Studio 或类似工具。
• 数据源，SQL Server，XML 文件或其他源。 我们将在这里使用 SQL Server 数据库。
• 一些 C# 或 VB 用于将数据绑定到 GridView 以及编写一些简单的代码。 我在这里使用 C#。 如果您使用的是 Visual Basic，请从在线工具将您的代码转换为 VB。
• 对 HTML 的基本理解。
• 对 CSS 的基本理解。

创建 GridView

我们将创建一个 GridView，而不是使用拖放概念，我们将手动编写代码来生成 GridView。 直接在 ASPX 页面中编写 GridView 的代码。

  <asp:GridView ID="gvDistricts" 
runat="server" HeaderStyle-BackColor="YellowGreen" 
AutoGenerateColumns="false" AlternatingRowStyle-BackColor="WhiteSmoke" 
OnRowDataBound="gvDistricts_RowDataBound">
        <Columns>
            <asp:TemplateField HeaderText="District ID" 
            HeaderStyle-Width="80px" ItemStyle-Width="80px">
                <ItemTemplate>
                    <asp:Label ID="lblDistID" runat="server" 
                    Text='<%#Eval("DistID")%>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
        <Columns>
            <asp:TemplateField HeaderText="District Name" 
            HeaderStyle-Width="120px" ItemStyle-Width="120px">
                <ItemTemplate>
                    <asp:Label ID="lblDistName" runat="server" 
                    Text='<%#Eval("DistName")%>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
        <Columns>
            <asp:TemplateField HeaderText="Description" 
            HeaderStyle-Width="200px" ItemStyle-Width="200px">
                <ItemTemplate>
                    <asp:Label ID="lblDistDesc" runat="server" 
                    Text='<%#Eval("DistDesc")%>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>  

上述代码中的重点

• AutoGenerateColumns = "false"：这将不会根据数据源列本身生成列。
• HeaderStyle-Width="80px" ItemStyle-Width="80px"：我们已经为标题和项目的 width 设置了完全相同的值。 如果我们在这里没有明确地应用这个，则在应用固定标题样式时，标题将无法正确显示。
• 其他是简单的 GridView 代码，具有 3 列，从后端使用 Eval() 方法获取值。

绑定数据

现在下一步是将数据绑定到 GridView。 让我们转到后端并编写一些代码来执行数据绑定。 我们这里没有什么可做的了，所以我将在 Page_Load 事件中编写代码。

protected void Page_Load(object sender, EventArgs e)
{
       string ConStr = "Data Source=localhost;Initial Catalog=ShikshaNet;Integrated Security=True";
     	   if (!IsPostBack)
			{
				string Query = "SELECT * FROM Districts";
				SqlConnection con = new SqlConnection(ConStr);
				SqlDataAdapter adp = new SqlDataAdapter(Query, con);
				DataTable dt = new DataTable();
				adp.Fill(dt);
				gvDistricts.DataSource = dt.DefaultView;
				gvDistricts.DataBind();
			}
	}   

此代码将简单地从默认的 SQL Server 实例、名为 ShikshaNet 的数据库中获取数据，并使用 Windows 身份验证。

制作可滚动

到目前为止，我们已经设计了一个带有 3 列的 GridView，将数据绑定到 gridview。 让我们继续前进，使其可滚动。 只要进入 GridView 的代码，并添加一个带有以下属性的 style 标签。

.... style="height:400px; overflow:auto" ...... 

您可以将 overflow:auto 更改为 overflow:scroll ，但这将同时显示 Scrollbar 并且始终显示。 上面将仅在 GridView 的 Height 超过分配的高度时才显示垂直滚动条。

我们已经完成了大部分任务。 让我们在浏览器中查看其输出。

让我们向下滚动页面。

固定标题

现在，数据已加载，Gridview 显示完美，它也在页面中滚动。 现在是时候移除它的另一个缺点了。 滚动时，标题在这里没有显示。 让我们应用此代码，以便标题可以粘在 gridview 的顶部或冻结。 现在使用类选择器方法编写 CSS 属性，并将其应用于 gridview 中的标题。

CSS 选择器将如下所示

<style type="text/css">
        .FixedHeader {
            position: absolute;
            font-weight: bold;
        }     
    </style>   

现在在 gridview 中将此类应用为标题样式。 GridView 代码将如下所示

 <asp:GridView ID="gvDistricts" runat="server" style="height:400px; overflow:auto" 
HeaderStyle-CssClass="FixedHeader" HeaderStyle-BackColor="YellowGreen" 
AutoGenerateColumns="false" AlternatingRowStyle-BackColor="WhiteSmoke" 
OnRowDataBound="gvDistricts_RowDataBound">   

上述实践的输出。

哦！ gridview 的第一行与标题重叠。 滚动时它会运行良好，但是，我们必须对其进行处理以向用户显示第一行。 在 RowDataBound 事件中编写以下代码。

protected void gvDistricts_RowDataBound(object sender, GridViewRowEventArgs e)
 {
     if (e.Row.RowType == DataControlRowType.DataRow)
     {
         if (e.Row.RowIndex == 0)
             e.Row.Style.Add("height", "50px");
     }
 }   

让我们看看最终输出。

感谢阅读。