我一直在冻结Gridview上的标题。 Gridview也必须是可滚动的。我已经完成了滚动功能。我无法获得锁定标头功能。我尝试了各种解决方案,包括css样式和JQuery插件,但似乎没有任何工作。我认为最大的问题是我的Gridview有一个多行标题。我在aspx中定义了一个行标题,然后在Gridview行数据绑定事件中创建了第二个行标题。有用的解决方案吗?
以下代码
ASPX
<div style="height: 95%; overflow-y: auto;">
<asp:GridView ID="markdownGrid" runat="server" AutoGenerateColumns="false" BackColor="White" RowStyle-Height="15" HeaderStyle-Height="20" HeaderStyle-Font-Size="small" HeaderStyle-Font-Names="Calibri" RowStyle-Font-Names="Calibri" RowStyle-Font-Size="13px" BorderWidth="0" OnRowDataBound="markdownGrid_RowDataBound" AllowPaging="false" OnPageIndexChanging="markdownGrid_PageIndexChanging" GridLines="Both" >
<RowStyle BackColor="#E5F2FF" CssClass="rowHeight" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="Row Header" HeaderText="" ItemStyle-Width="9%" ItemStyle-HorizontalAlign="Left" ItemStyle-Font-Bold="true" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" />
<asp:BoundField DataField="Stores Clearance Actual"
HeaderText="Clearance Actual" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" />
<asp:BoundField DataField="Stores Clearance Estimate" HeaderText="Clearance Estimate" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" />
<asp:BoundField DataField="Stores Clearance Total" HeaderText="Clearance Total" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" />
<asp:BoundField DataField="Stores POS Actual" HeaderText="POS Actual" ItemStyle-Width="4%" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" />
<asp:BoundField DataField="Stores MD Total" HeaderText="MD Total" ItemStyle-Width="4%" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" />
<asp:BoundField DataField="Stores Next Month Clearance Estimate" ItemStyle-Width="4%"
HeaderText="Next Month Clearance Estimate" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" />
<asp:BoundField DataField="Stores blank" ItemStyle-Width="0.5%" ItemStyle-BackColor="#F8F8F8" ItemStyle-BorderStyle="None" HeaderStyle-BorderStyle="None" HeaderStyle-BackColor="#F8F8F8" />
<asp:BoundField DataField="COM Clearance Actual"
HeaderText="Clearance Actual" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" />
<asp:BoundField DataField="COM Clearance Estimate" HeaderText="Clearance Estimate" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" />
<asp:BoundField DataField="COM Clearance Total" HeaderText="Clearance Total" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" />
<asp:BoundField DataField="COM POS Actual" HeaderText="POS Actual" ItemStyle-Width="4%" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" />
<asp:BoundField DataField="COM MD Total" HeaderText="MD Total" ItemStyle-Width="4%" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" />
<asp:BoundField DataField="COM Next Month Clearance Estimate" ItemStyle-Width="4%"
HeaderText="Next Month Clearance Estimate" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" />
<asp:BoundField DataField="COM blank" ItemStyle-Width="0.5%" ItemStyle-BackColor="#F8F8F8" ItemStyle-BorderStyle="None" HeaderStyle-BorderStyle="None" HeaderStyle-BackColor="#F8F8F8" />
<asp:BoundField DataField="Company Clearance Actual"
HeaderText="Clearance Actual" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" />
<asp:BoundField DataField="Company Clearance Estimate" HeaderText="Clearance Estimate" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" />
<asp:BoundField DataField="Company Clearance Total" HeaderText="Clearance Total" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" />
<asp:BoundField DataField="Company POS Actual" HeaderText="POS Actual" ItemStyle-Width="4%" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" />
<asp:BoundField DataField="Company Other Actual" HeaderText="Other-MDA" ItemStyle-Width="5%" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" />
<asp:BoundField DataField="Company MD Total" HeaderText="MD Total" ItemStyle-Width="4%" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" />
<asp:BoundField DataField="Company LY Clearance" HeaderText="LY Clearance EOW" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" />
<asp:BoundField DataField="Company Next Month Clearance Estimate" ItemStyle-Width="4%" HeaderText="Next Month Clearance Estimate" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" />
</Columns>
</asp:GridView>
</div>
背后的代码
protected void markupGrid_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
if (dateSelection.Text != null)
{
e.Row.Cells[0].Text = dateSelection.Text;
}
GridViewRow headerow = new GridViewRow(0, 0, DataControlRowType.Header,
DataControlRowState.Insert);
TableCell headercell = new TableCell()
{
// First blank cell
Text = "PTD",
ForeColor = Color.Red,
HorizontalAlign = HorizontalAlign.Center,
BorderWidth = 1,
BorderColor = Color.Black,
CssClass = "gridSectionHeaders"
};
headerow.Cells.Add(headercell);
headercell = new TableCell()
{
// TOTAL SELLING LOCATIONS header
ColumnSpan = 2,
Text = "TOTAL SELLING LOCATIONS",
HorizontalAlign = HorizontalAlign.Center,
BorderWidth = 1,
CssClass = "gridSectionHeaders"
};
headerow.Cells.Add(headercell);
headercell = new TableCell()
{
// Second blank cell
BackColor = ColorTranslator.FromHtml("#F8F8F8"),
BorderWidth = 0
};
headerow.Cells.Add(headercell);
headercell = new TableCell()
{
// COM header
Text = "COM",
ColumnSpan = 2,
HorizontalAlign = HorizontalAlign.Center,
BorderWidth = 1,
CssClass = "gridSectionHeaders"
};
headerow.Cells.Add(headercell);
headercell = new TableCell()
{
// Last blank cell
BackColor = ColorTranslator.FromHtml("#F8F8F8"),
BorderWidth = 0
};
headerow.Cells.Add(headercell);
headercell = new TableCell()
{
// TOTAL header
ColumnSpan = 3,
Text = "TOTAL",
HorizontalAlign = HorizontalAlign.Center,
BorderWidth = 1,
CssClass = "gridSectionHeaders"
};
headerow.Cells.Add(headercell);
headercell.Height = 20;
markupGrid.Controls[0].Controls.AddAt(0, headerow);
}
}
答案 0 :(得分:2)
我认为您正在寻找this。
以下是我在我的应用程序中使用它的方式,它没有任何问题。关于类似问题,请参阅我的其他答案here和here。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="gridviewScroll.min.js"></script>
<link href="GridviewScroll.css" rel="stylesheet" />
function pageLoad(sender, args) {
gridviewScroll ();
}
function gridviewScroll() {
gridView1 = $('#GridView1').gridviewScroll({
width: 915,
height: 449,
railcolor: "#F0F0F0",
barcolor: "#CDCDCD",
barhovercolor: "#606060",
bgcolor: "#F0F0F0",
freezesize: 5,
arrowsize: 30,
varrowtopimg: "../../../images/arrowvt.png",
varrowbottomimg: "../../../images/arrowvb.png",
harrowleftimg: "../../../images/arrowhl.png",
harrowrightimg: "../../../images/arrowhr.png",
headerrowcount: 1,
onScrollVertical: function (delta) {
// store the scroll offset outside of this function in a hidden field and restore if you want to maintain vertical scroll position
},
onScrollHorizontal: function (delta) {
//store the scroll offset outside of this function in a hidden field and restore if you want to maintain horizontal scroll position
}
});
}
屏幕上显示冻结网格标题在我的应用程序中的显示方式