所以我不得不卡住 gridview 的标题栏,我使用 asp:panel 和 CSS 做到了这一点。
<asp:Panel ID="panelContainer" runat="server" Height="100px" Width="100%" ScrollBars="Vertical">
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" Font-Size="small" CssClass="HeaderFreeze" />
.HeaderFreeze
{
position:absolute;
height: 40px;
top: 80px;
}
我现在唯一的问题是标题不再保持列的大小;有什么方法可以强制标题保持列的大小(可能会因其中的数据而改变)。
谢谢
最佳答案
对于动态列宽,请使用 JavaScript。这是一个使用 jQuery 的解决方案:
example jsfiddle ( fullscreen )
创建一个只有标题行的重复表元素
<table id="panelContainerFixed">
<tr class="header">
<th>ID</th><th>Name</th>
</tr>
</table>
<table id="panelContainer">
<tr class="header">
<th>ID</th><th>Name</th>
</tr>
<tr>
<td>1</td><td>Name-1</td>
</tr>
<tr>
<td>2</td><td>Name-2</td>
</tr>
<tr>
<td>3</td><td>Name-3</td>
</tr>
...
</table>
计算列的宽度并将这些宽度应用于重复的标题
// cache re-usable variables
var $window = $(window),
$panelContainerFixed = $('#panelContainerFixed'),
$panelContainer = $('#panelContainer'),
$header = $('.header'),
headerPos = $header.offset().top + $header.height();
// set column widths
$panelContainer.find('th').each(function() {
var $that = $(this);
$panelContainerFixed.find('th').eq($that.index()).width($that.width());
});
根据scrollTop显示/隐藏重复的header
// on window scroll toggle the fixed headers
$window.scroll(function() {
if ($window.scrollTop() > headerPos) {
$panelContainerFixed.show();
} else {
$panelContainerFixed.hide();
}
});
关于asp.net - 在标题卡住后保持 Gridview 标题与列的大小相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13015998/