【发布时间】：2023-03-13 19:41:01
【问题描述】：
我需要同时冻结列 0、1 我希望行（不是 HEADER，HEADER 被隐藏）0、1、2 当用户上下滚动并从左到右滚动时也冻结列和行将在那里是静态的，我尝试了一些 jQuery 代码但它不起作用，我在 Stack Overflow 问题中找到了这个 CSS 示例，我将它用于我的项目。到目前为止，我只使用列来尽快完成这项工作，但是正如我在行锁定之前所说的那样，我需要。
我在 HTML 表中有一个 gridview ASP.NET C#，在“加载页面”事件中，网格会填充数据表信息。此 Datable 从 SQL 数据库中获取信息。
当事件触发时，我在网格上应用 CSS，所有这些都可以正常工作！
为了让您了解网格的外观，这里是一个示例：
您看不到水平滚动条，因为用户选择了年数，但这可以根据他的选择而改变。
这是我最近使用的 CSS：
.pinned
{
position:fixed;
background-color: #FFFFFF;
z-index: 100;
}
.scrolled
{
position: relative;
left: 150px;
overflow: hidden;
white-space: nowrap;
min-width: 50px;
}
.col1
{
left: 0px;
width: 50px;
}
.col2
{
left: 50px;
width: 100px;
}
HTML：
<div style="overflow:scroll; height: 400px; width: 911px; margin:auto;">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="true" GridLines="Vertical" OnRowCreated="COl" OnRowDataBound="ROWCSS" ShowHeader="false">
</asp:GridView>
</div>
这是 C# 代码，当 rowcreated 事件触发时：然后我 colspan 标题（前 3 行 -0,1,2-）
当 rowdatabound 触发时：然后我应用 CSS 字体和背景颜色：
protected void ROWCSS(object sender, GridViewRowEventArgs e)
{
int i = e.Row.Cells.Count;
int index = e.Row.RowIndex;
if (e.Row.RowType == DataControlRowType.DataRow)
{
//THIS IS THE FOR, THAT LOCKS THE COLUMN 0 and 1 ************
for (int j = 0; j <= (i - 1); j++)
{
if (j == 0)
{
e.Row.Cells[j].CssClass = "pinned col1";
}
else if (j == 1)
{
e.Row.Cells[j].CssClass = "pinned col2";
}
else
{
e.Row.Cells[j].CssClass = "scrolled";
}
}
//********************************
if (index == 3 || index == 32 || index == 46 || index == 50)
{
for (int j = 0; j <= (i - 1); j++)
{
//Si la columna es la 0 o la 1, entonces aplicar formato izquierdo
if (j == 0 || j == 1)
{
e.Row.Cells[j].CssClass = "naranjaCSSLEFT";
}
//En caso contrario, formato derecho
else
{
e.Row.Cells[j].CssClass = "naranjaCSSRIGHT";
}
}
}
else if (index == 4 || index == 15 || index == 29 || index == 33 || index == 41)
{
for (int j = 0; j <= (i - 1); j++)
{
//Si la columna es la 0 o la 1, entonces aplicar formato izquierdo
if (j == 0 || j == 1)
{
e.Row.Cells[j].CssClass = "azulCSSLEFT";
}
//En caso contrario, formato derecho
else
{
e.Row.Cells[j].CssClass = "azulCSSRIGHT";
}
}
}
else if (!(index == 0 || index == 1 || index == 2))
{
for (int j = 0; j <= (i - 1); j++)
{
//Si la columna es la 0 o la 1, entonces aplicar formato izquierdo
if (j == 0 || j == 1)
{
e.Row.Cells[j].CssClass = "negroCSSLEFT";
}
//En caso contrario, formato derecho
else
{
e.Row.Cells[j].CssClass = "negroCSSRIGHT";
}
}
}
}
}
最后这是我用来为字体和背景着色的一些 CSS（不确定是否需要提供）：
.naranjaCSSLEFT
{
font-weight:bold;
color:#C65911;
font-size: 13px;
text-align:left;
font-family:tahoma;
}
.naranjaCSSRIGHT
{
font-weight:bold;
color:#C65911;
font-size: 13px;
text-align:right;
font-family:tahoma;
}
.azulCSSLEFT
{
font-weight:bold;
color:#2F75B5;
font-size: 13px;
text-align:left;
font-family:tahoma;
}
.azulCSSRIGHT
{
font-weight:bold;
color:#2F75B5;
font-size: 13px;
text-align:right;
font-family:tahoma;
}
.negroCSSLEFT
{
font-weight:normal;
color:#000000;
font-size: 13px;
text-align:left;
font-family:tahoma;
}
.negroCSSRIGHT
{
font-weight:normal ;
color:#000000;
font-size: 13px;
text-align:right;
font-family:tahoma;
}
.FILACSS
{
font-weight:bold ;
color:#FFFFFF;
font-size: 13px;
text-align:center;
font-family:tahoma;
background:#2F75B5;
border:hidden;
}
如果你想知道我在应用这个之后会得到什么：
看起来：搞砸了！前 3 行...不知道发生了什么。 colspan 应用于不同的事件。
如果你想知道 colspan Rowcreated 事件是什么，是这样的吗：
protected void COl(object sender, GridViewRowEventArgs e)
{
int index = e.Row.RowIndex;
int i = e.Row.Cells.Count;
if (i == 4)
{
if (index == 0)
{
for (int j = 2; j <= (i - 1); j++)
{
//e.Row.Cells[j].CssClass = "GVFixedHeader";
e.Row.Cells[j].CssClass = "FILACSS";
}
// e.Row.Cells[2].Text = "ACUMULADO DE ENERO - " + NomMes;
e.Row.Cells[2].ColumnSpan = 2;
e.Row.Cells.RemoveAt(3);
}
if (index == 1)
{
for (int j = 2; j <= (i - 1); j++)
{
e.Row.Cells[j].CssClass = "FILACSS";
}
}
if (index == 2)
{
for (int j = 2; j <= (i - 1); j++)
{
e.Row.Cells[j].CssClass = "FILACSS";
}
}
}
if (i == 8)
{
if (index == 0)
{
for (int j = 2; j <= (i - 1); j++)
{
//e.Row.Cells[j].CssClass = "FILACSS";
e.Row.Cells[j].CssClass = "FILACSS";
}
//*******************************
//e.Row.Cells[0].Text = "ACUMULADO DE ENERO - " + NomMes;
e.Row.Cells[2].ColumnSpan = 6;
for (int b = 7; b >= 3; b--)
{
e.Row.Cells.RemoveAt(b);
}
}
if (index == 1)
{
for (int j = 2; j <= (i - 1); j++)
{
//e.Row.Cells[j].CssClass = "FILACSS";
e.Row.Cells[j].CssClass = "FILACSS";
}
//******************************
for (int b = 2; b <= 6; b++)
{
e.Row.Cells[b].ColumnSpan = 2;
b++;
}
for (int b = 7; b >= 3; b--)
{
e.Row.Cells.RemoveAt(b);
b--;
}
}
if (index == 2)
{
for (int j = 2; j <= (i - 1); j++)
{
//e.Row.Cells[j].CssClass = "FILACSS";
e.Row.Cells[j].CssClass = "FILACSS";
}
}
}
if (i == 10)
{
if (index == 0)
{
for (int j = 2; j <= (i - 1); j++)
{
e.Row.Cells[j].CssClass = "FILACSS";
}
//*******************************
//e.Row.Cells[2].Text = "ACUMULADO DE ENERO - " + NomMes;
e.Row.Cells[2].ColumnSpan = 8;
for (int b = 9; b >= 3; b--)
{
e.Row.Cells.RemoveAt(b);
}
}
if (index == 1)
{
for (int j = 2; j <= (i - 1); j++)
{
e.Row.Cells[j].CssClass = "FILACSS";
}
//******************************
for (int b = 2; b <= 8; b++)
{
e.Row.Cells[b].ColumnSpan = 2;
b++;
}
for (int b = 9; b >= 3; b--)
{
e.Row.Cells.RemoveAt(b);
b--;
}
}
if (index == 2)
{
for (int j = 2; j <= (i - 1); j++)
{
e.Row.Cells[j].CssClass = "FILACSS";
}
}
}
if (i == 12)
{
if (index == 0)
{
for (int j = 2; j <= (i - 1); j++)
{
e.Row.Cells[j].CssClass = "FILACSS";
}
//*******************************
//e.Row.Cells[2].Text = "ACUMULADO DE ENERO - " + NomMes;
e.Row.Cells[2].ColumnSpan = 10;
for (int b = 11; b >= 3; b--)
{
e.Row.Cells.RemoveAt(b);
}
}
if (index == 1)
{
for (int j = 2; j <= (i - 1); j++)
{
e.Row.Cells[j].CssClass = "FILACSS";
}
//******************************
for (int b = 2; b <= 10; b++)
{
e.Row.Cells[b].ColumnSpan = 2;
b++;
}
for (int b = 11; b >= 3; b--)
{
e.Row.Cells.RemoveAt(b);
b--;
}
}
if (index == 2)
{
for (int j = 2; j <= (i - 1); j++)
{
e.Row.Cells[j].CssClass = "FILACSS";
}
}
}
}
列尚未冻结。
【问题讨论】：
标签： c# jquery css asp.net gridview