如标题所示,有人知道如何在 ASP.NET 中冻结 GridView 标头吗?
rafek
问问题
49184 次
8 回答
4
你可以在css中做到这一点
Freeze Header: 1. 在样式表中定义类 .Freezing:
.Freezing
{
position:relative ;
top:expression(this.offsetParent.scrollTop);
z-index: 10;
}
2.Assign Datagrid Header的cssClass为Freezing
于 2008-10-01T13:29:56.963 回答
2
试试这个 ASP.NET 的开源项目。它扩展了 GridView 以提供固定的页眉、页脚和分页器以及可调整大小的列宽。在 IE 6/7/8、Firefox 3.0/3.5、Chrome 和 Safari 中运行良好。
http://johnsobrepena.blogspot.com/2009/09/extending-aspnet-gridview-for-fixed.html
于 2010-02-04T16:44:46.167 回答
2
在 Asp.Net 2.0 / 3.5 中开发 Web 应用程序时,我也遇到了类似的问题。
美好的一天,我遇到了IdeaSparks ASP.NET CoolControls。它有助于显示修复列标题、页脚和分页器。
我个人使用它们,我真的很喜欢它!
要检查控件,请单击此处:IdeaSparks ASP.NET CoolControls
希望这可以帮助!
于 2011-11-12T03:39:48.467 回答
2
我想我有这个解决方案。请看下面的javascript代码
<script type="text/javascript" language="javascript">
var orgTop = 0;
$(document).scroll(function () {
var id = $("tr:.header").get(0);
var offset = $(id).offset();
var elPosition = $(id).position();
var elWidth = $(id).width();
var elHeight = $(id).height();
if (orgTop == 0) {
orgTop = elPosition.top;
}
if ($(window).scrollTop() <= orgTop) {
id.style.position = 'relative';
id.style.top = 'auto';
id.style.width = 'auto';
id.style.height = 'auto';
}
else {
id.style.position = 'absolute';
id.style.top = $(window).scrollTop() + 'px';
id.style.width = elWidth + 'px';
id.style.height = elHeight + 'px';
}
});
</script>
.header
Grid 标头的 css 类在哪里。
只需在页面上添加此脚本并替换header
为您用于标题的 css 类名称。
于 2012-09-24T13:15:21.200 回答
1
于 2009-01-13T07:49:42.150 回答
1
您可以尝试以下示例
于 2010-07-28T07:53:38.653 回答
0
<script src="Scripts/jquery-1.7.1.js"></script>
<script language="javascript" >
$(document).ready(function () {
var gridHeader = $('#<%=GridView1.ClientID%>').clone(true); // Here Clone Copy of Gridview with style
$(gridHeader).find("tr:gt(0)").remove(); // Here remove all rows except first row (header row)
$('#<%=GridView1.ClientID%> tr th').each(function (i) {
// Here Set Width of each th from gridview to new table(clone table) th
$("th:nth-child(" + (i + 1) + ")", gridHeader).css('width', ($(this).width()).toString() + "px");
});
$("#GHead").append(gridHeader);
$('#GHead').css('position', 'absolute');
$('#GHead').css('top', $('#<%=GridView1.ClientID%>').offset().top);
});
</script>
<h3>Scrollable Gridview with fixed header in ASP.NET</h3>
<br />
<div style="width:550px;">
<div id="GHead"></div>
<%-- This GHead is added for Store Gridview Header --%>
<div style="height:300px; overflow:auto">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
CellPadding="5" HeaderStyle-BackColor="#f3f3f3">
<Columns>
<asp:BoundField HeaderText="ID" DataField="StateID" />
<asp:BoundField HeaderText="Country" DataField="Country" />
<asp:BoundField HeaderText="StateName" DataField="StateName" />
</Columns>
</asp:GridView>
</div>
</div>
于 2021-05-30T06:27:24.303 回答