在GridView中冻结标题（多行标题） [英] Freeze Headers(Multiple row headers) in GridView
问题描述
要求：
带有多个标题行的GridView。
当垂直滚动时，标题自由化（GridView行只能滚动）。
有可能吗？这是我的代码..
Aspx：
<％@ Page Language =C＃AutoEventWireup =trueCodeBehind =ScrollableGridWithFixedHeader.aspx.csInherits =ScrollableDataGrid.ScrollableGridWithFixedHeader％>
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd >
< html xmlns =http://www.w3.org/1999/xhtml>
< head runat =server>
< script src =css / jquery-1.4.1.min.jstype =text / javascript>< / script>
< script src =css / ScrollableGridPlugin.jstype =text / javascript>< / script>
< title>具有固定标题的可滚动网格< / title>
< style type =text / css>
.GVFixedHeader
{
字体重量：粗体;
背景色：绿色;
职位：相对;
}
< / style>
< / head> ;
< body>
< form id =form1runat =server>
Requirement :
GridView with Multiple Header rows.
When vertical scroll, headers freeezed (GridView rows only scrollable).
Is it possible? here is my code..
Aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ScrollableGridWithFixedHeader.aspx.cs" Inherits="ScrollableDataGrid.ScrollableGridWithFixedHeader" %>
<!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">
<script src="css/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="css/ScrollableGridPlugin.js" type="text/javascript"></script>
<title>Scrollable Grid with Fixed Header</title>
<style type="text/css">
.GVFixedHeader
{
font-weight:bold;
background-color:Green;
position:relative;
}
</style>
</head>
<body>
<form id="form1" runat="server">
< asp：Button ID =btnGetDataText =Get Datarunat =serverOnClick =OnGetDataClick/>
<asp:Button ID="btnGetData" Text="Get Data" runat="server" OnClick="OnGetDataClick"/>
<％ - < asp：panel ID =panelContainerrunat =server
ScrollBars =垂直
宽度=100％高度=400px> - ％>
< asp：GridView ID =EmployeeGridrunat =serverAutoGenerateColumns =trueDataKeyNames =Customer
OnRowCreated =EmployeeGrid_RowCreated
字体名称=时代New RomanBorderColor =BlackBorderStyle =Solid
BorderWidth =1>
< rowstyle backcolor =＃EFF3FB>
< footerstyle backcolor =＃507CD1font-bold =Trueforecolor =White>
< pagers tyle backcolor =＃2461BFforecolor =Whitehorizontalalign =Center>
< HeaderStyle BackColor =＃507CD1Font-Bold =TrueForeColor =White/> ;
< alternatingrowstyle backcolor =White>
<％ - - ％>
<%-- <asp:panel ID="panelContainer" runat="server"
ScrollBars="vertical"
Width="100%" Height="400px">--%>
<asp:GridView ID="EmployeeGrid" runat="server" AutoGenerateColumns="true" DataKeyNames="Customer"
OnRowCreated="EmployeeGrid_RowCreated"
Font-Names="Times New Roman" BorderColor="Black" BorderStyle="Solid"
BorderWidth="1">
<rowstyle backcolor="#EFF3FB">
<footerstyle backcolor="#507CD1" font-bold="True" forecolor="White">
<pagerstyle backcolor="#2461BF" forecolor="White" horizontalalign="Center">
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<alternatingrowstyle backcolor="White">
<%-- --%>
< / form>
< / body>
< / html>
cs代码在这里：
------------------------------------------- -----------
使用系统;
使用System.Collections;
使用System.Configuration;
使用System.Data;
使用System.Linq;
使用System.Web;
使用System.Web.Security;
使用System.Web.UI;
使用System.Web.UI.HtmlControls;
使用System.Web.UI.WebControls;
使用System.Web.UI.WebControls.WebParts;
使用System.Xml.Linq;
使用System.Data。 SqlClient;
名称空间ScrollableDataGrid
{
公共部分类ScrollableGridWithFixedHeader：System.Web.UI.Page
{
protected void Page_Load（object sender，EventArgs e）
{
}
protected void EmployeeGrid_RowCreated（对象发送者，GridViewRowEventArgs e）
{
if（e.Row .RowType == DataControlRowType.Header）
{
//创建gridview对象
GridView objGridView =（GridView）EmployeeGrid;
//创建gridview行对象
GridViewRow HeaderGridRow = new GridViewRow（1,0，DataControlRowType.Header，DataControlRowState.Insert）;
//创建表格单元格对象
TableCell HeaderCell = new TableCell（）;
HeaderCell = new TableCell（）;
HeaderCell.Text =ODE Endtime;
HeaderCell。 ColumnSpan = 3;
HeaderGridRow.Cells.Add（HeaderCell）;
HeaderCell = new TableCell（）;
HeaderCell.Text =RDE Endtime;
HeaderCell.ColumnSpan = 8;
HeaderGridRow.Cells.Add（HeaderCell）;
//在前三个单元格标题中添加一个空白单元格
//这可以通过将表格单元格对象的colspan属性设置为3
//来实现表格单元格对象的text属性为空白
//此后，将表格单元格对象添加到网格视图行对象
// AddMergedCells（objgridviewrow，objtablecell，3 ，员工详细信息，System.Drawing.Color.LightGreen.Name）;
//在列名地址详情下合并列d，e（即地址，城市，地区，邮政编码，国家）
//这可以通过将表格单元格对象的colspan属性设置为2
//并将其文本设置为地址详细信息来实现
//此后，将表格单元格对象添加到网格视图行对象
// AddMergedCells（objgridviewrow，objtablecell，2，Address Details，System.Drawing.Color.LightSkyBlue.Name）;
// AddMergedCells（objgridviewrow，objtablecell，4，Address Specify，System.Drawing.Color.LightSkyBlue.Name）;
//最后将gridrow对象添加到第0位的gridview对象
//因为标题行位置为0。
//EmployeeGrid.Controls[0].Controls.AddAt(0,objGridView),
EmployeeGrid.Controls [0] .Controls.AddAt（0，HeaderGridRow）;
}
}
protected void OnGetDataClick（object sender，EventArgs e）
{
string ConnString = ConfigurationManager.ConnectionStrings [ConnStrForEVTS]。ConnectionString;
string SqlString =从dbo.Daily_Abend_RDE_Rpt中选择前200 *;
使用（SqlConnection conn = new SqlConnection（ConnString））
{
using （SqlCommand cmd = new SqlCommand（SqlString，conn））
{
cmd.Co mmandType = CommandType.Text;
//cmd.Parameters.AddWithValue（FirstName，txtFirstName.Text）;
conn.Open（）;
使用（SqlDataReader reader = cmd.ExecuteReader（））
{
EmployeeGrid.DataSource = reader;
EmployeeGrid.DataBind（）;
}
}
}
}
}
}
如果简单的解决方案存在与否，请立即告诉我？虽然我们会这样做，但我们也会关注各列的每个记录的对齐。
感谢先进:)
Anup
</form>
</body>
</html>
cs Code is here:
------------------------------------------------------
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
namespace ScrollableDataGrid
{
public partial class ScrollableGridWithFixedHeader : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void EmployeeGrid_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
//Creating a gridview object
GridView objGridView = (GridView)EmployeeGrid;
//Creating a gridview row object
GridViewRow HeaderGridRow = new GridViewRow(1, 0, DataControlRowType.Header, DataControlRowState.Insert);
//Creating a table cell object
TableCell HeaderCell = new TableCell();
HeaderCell = new TableCell();
HeaderCell.Text = "ODE Endtime";
HeaderCell.ColumnSpan = 3;
HeaderGridRow.Cells.Add(HeaderCell);
HeaderCell = new TableCell();
HeaderCell.Text = "RDE Endtime";
HeaderCell.ColumnSpan = 8;
HeaderGridRow.Cells.Add(HeaderCell);
//Add a blank cell at the first three cell headers
//This can be achieved by making the colspan property of the table cell object as 3
// and the text property of the table cell object will be blank
//Henceforth, add the table cell object to the grid view row object
//AddMergedCells(objgridviewrow, objtablecell, 3, "Employee Detail", System.Drawing.Color.LightGreen.Name);
//Merge columns d,e (i.e.Address, City, Region, Postal Code, Country) under the column name "Address Details"
//This can be achieved by making the colspan property of the table cell object as 2
//and setting it''s text to "Address Details"
//Henceforth, add the table cell object to the grid view row object
//AddMergedCells(objgridviewrow, objtablecell, 2, "Address Details", System.Drawing.Color.LightSkyBlue.Name);
//AddMergedCells(objgridviewrow, objtablecell,4, "Address Specify", System.Drawing.Color.LightSkyBlue.Name);
//Lastly add the gridrow object to the gridview object at the 0th position
//Because,the header row position is 0.
//EmployeeGrid.Controls[0].Controls.AddAt(0, objGridView);
EmployeeGrid.Controls[0].Controls.AddAt(0, HeaderGridRow);
}
}
protected void OnGetDataClick(object sender, EventArgs e)
{
string ConnString = ConfigurationManager.ConnectionStrings["ConnStrForEVTS"].ConnectionString;
string SqlString = "select top 200 * from dbo.Daily_Abend_RDE_Rpt";
using (SqlConnection conn = new SqlConnection(ConnString))
{
using (SqlCommand cmd = new SqlCommand(SqlString, conn))
{
cmd.CommandType = CommandType.Text;
//cmd.Parameters.AddWithValue("FirstName", txtFirstName.Text);
conn.Open();
using (SqlDataReader reader = cmd.ExecuteReader())
{
EmployeeGrid.DataSource = reader;
EmployeeGrid.DataBind();
}
}
}
}
}
}
Please just let me now if the simple solution is exists or not? while we will do we have take care about the alignment of each record of respective column also.
Thanks in advanced :)
Anup
推荐答案
如果您错过了，请查看此链接：
动态多行列网格标题 [ ^ ]
Check this link if you have missed it:
Dynamic Multiple Row Column Grid Header[^]
也许你可以尝试我的解决方案，我wonge一个jquery插件可以固定标题和冻结列。
它正在工作：
Internet Explorer 7,8 （IE 9兼容性）
Internet Explorer 9（9.0.8112）
Windows 7预览版上的Internet Explorer 10
Google Chrome（23.0.1271.64） m）
Mozilla Firefox（16.0.2）
Apple Safari（5.1.7）
演示： HeaderColumnMerge
带有jQuery的GridViewScroll
maybe you can try my solution, i worte a jquery plug-in can be fixed header and freeze column.
It is working on:
Internet Explorer 7, 8 (IE 9 Compatibility)
Internet Explorer 9 (9.0.8112)
Internet Explorer 10 on Windows 7 Preview
Google Chrome(23.0.1271.64 m)
Mozilla Firefox (16.0.2)
Apple Safari (5.1.7)
Demo: HeaderColumnMerge
GridViewScroll with jQuery
这篇关于在GridView中冻结标题（多行标题）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
