固定的GridView头滚动时 [英] fixing gridview header while scrolling
本文介绍了固定的GridView头滚动时的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有固定的GridView头，虽然我向下滚动标题将是恒定的，但问题是头是格式不正确。像所有的列标题萎缩，并在特定的列不会显示。我试过很多东西，但没有什么是有用的。显然saing头宽度不等于列。我已经使用的JavaScript code滚动，也的CssClass固定。
请给我找解决方案
JavaScript的code
＆LT;脚本类型=文/ JavaScript的＆GT;
变种GridId =下;％= GridViewLeaveHistory.ClientID％gt;中;
VAR scrollHeight属性= 300;
VAR ScrollWidth = 300;
在window.onload =函数（）{
VAR格=的document.getElementById（GridId）;
VAR gridWidth = grid.offsetWidth;
VAR gridHeight = grid.offsetHeight;
VAR headerCellWidths =新的Array（）;
对于（VAR I = 0; I＆LT; grid.getElementsByTagName（TH）长;我++）{
headerCellWidths [I] = grid.getElementsByTagName（TH）[I] .offsetWidth;
}
grid.parentNode.appendChild（使用document.createElement（格））;
VAR parentDiv = grid.parentNode; 无功表=使用document.createElement（表）;
对于（i = 0; I＆LT; grid.attributes.length;我++）{
如果（grid.attributes .specified [1] - 放大器;＆放大器; grid.attributes [I]。名称=ID！）{
table.setAttribute（grid.attributes [I] .name和grid.attributes [I]。价值）;
}
}
table.style.cssText = grid.style.cssText;
table.style.width = gridWidth +PX
table.appendChild（使用document.createElement（TBODY））;
table.getElementsByTagName（TBODY）[0] .appendChild（grid.getElementsByTagName（TR）[0]）;
VAR细胞= table.getElementsByTagName（TH）; 变种gridRow = grid.getElementsByTagName（TR）[0];
对于（VAR I = 0; I＆LT; cells.length;我++）{
VAR宽度;
如果（headerCellWidths [Ⅰ]≥gridRow.getElementsByTagName（TD）[I] .offsetWidth）{
宽度= headerCellWidths [I]
}
其他{
宽度= gridRow.getElementsByTagName（TD）[I] .offsetWidth;
}
细胞[I] .style.width = parseInt函数（宽 - 3）+PX
gridRow.getElementsByTagName（TD）[I] .style.width = parseInt函数（宽 - 3）+PX
}
parentDiv.removeChild（网格）; VAR dummyHeader =使用document.createElement（分区）;
dummyHeader.appendChild（表）;
parentDiv.appendChild（dummyHeader）;
VAR scrollableDiv =使用document.createElement（分区）;
如果（parseInt函数（gridHeight）GT; scrollHeight属性）{
gridWidth = parseInt函数（gridWidth）+ 17;
}
scrollableDiv.style.cssText =溢出：汽车;高度：+ scrollHeight属性+像素;宽度：+ gridWidth +PX+ ScrollWidth;
scrollableDiv.appendChild（网格）;
parentDiv.appendChild（scrollableDiv）;
}
CSS类
.Freezing
{
位置：相对;
顶部：前pression（this.offsetParent.scrollTop-1）;
的z-index：10;
}
GridView控件code
＆LT; DIV的风格=宽度：810像素，高度：259px;＆GT;
＆LT; ASP：GridView控件ID =GridViewLeaveHistory=服务器AllowSorting =真
的AutoGenerateColumns =FALSE背景色=白BORDERCOLOR =＃0061C1
边框样式=无CaptionAlign =底EmptyDataText =没有找到记录
字体名称=宋体FONT-SIZE =X-小前景色=＃0061C1HEIGHT =18像素
OnRowCommand =GridViewLeaveHistory_RowCommand
OnRowDataBound =GridViewLeaveHistory_RowDataBound的CssClass =冻结
OnSelectedIndexChanged =GridViewLeaveHistory_SelectedIndexChanged
ShowFooter =真ShowHeaderWhenEmpty =真WIDTH =801px＆GT;
解决方案
我觉得这个链接还可以帮助你：<一href=\"http://www.dotnetspider.com/resources/45019-Scrollable-Gridview-with-fixed-Header-Footer-using-Javascript.aspx\" rel=\"nofollow\">http://www.dotnetspider.com/resources/45019-Scrollable-Gridview-with-fixed-Header-Footer-using-Javascript.aspx
I had fixed GridView header and while i scroll down headers will be constant but the problem is headers are not in proper format. Like all the column headers are shrinked and wont display under particular column . I tried many things but nothing was useful. Clearly saing header width is not equal to column. I have used JavaScript code for Scrolling and also CssClass for Fixing.
Please find the solution for me
JavaScript Code
<script type = "text/javascript">
var GridId = "<%=GridViewLeaveHistory.ClientID %>";
var ScrollHeight = 300;
var ScrollWidth = 300;
window.onload = function () {
var grid = document.getElementById(GridId);
var gridWidth = grid.offsetWidth;
var gridHeight = grid.offsetHeight;
var headerCellWidths = new Array();
for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
}
grid.parentNode.appendChild(document.createElement("div"));
var parentDiv = grid.parentNode;
var table = document.createElement("table");
for (i = 0; i < grid.attributes.length; i++) {
if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
}
}
table.style.cssText = grid.style.cssText;
table.style.width = gridWidth + "px";
table.appendChild(document.createElement("tbody"));
table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
var cells = table.getElementsByTagName("TH");
var gridRow = grid.getElementsByTagName("TR")[0];
for (var i = 0; i < cells.length; i++) {
var width;
if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
width = headerCellWidths[i];
}
else {
width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
}
cells[i].style.width = parseInt(width - 3) + "px";
gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
}
parentDiv.removeChild(grid);
var dummyHeader = document.createElement("div");
dummyHeader.appendChild(table);
parentDiv.appendChild(dummyHeader);
var scrollableDiv = document.createElement("div");
if (parseInt(gridHeight) > ScrollHeight) {
gridWidth = parseInt(gridWidth) + 17;
}
scrollableDiv.style.cssText = "overflow:auto;height:" + ScrollHeight + "px;width:" + gridWidth + "px" + ScrollWidth;
scrollableDiv.appendChild(grid);
parentDiv.appendChild(scrollableDiv);
}
Css Class
.Freezing
{
position: relative;
top: expression(this.offsetParent.scrollTop-1);
z-index: 10;
}
GridView Code
<div style="width: 810px; height: 259px;">
<asp:GridView ID="GridViewLeaveHistory" runat="server" AllowSorting="True"
AutoGenerateColumns="False" BackColor="White" BorderColor="#0061C1"
BorderStyle="None" CaptionAlign="Bottom" EmptyDataText="No Records Found"
Font-Names="Verdana" Font-Size="X-Small" ForeColor="#0061C1" Height="18px"
OnRowCommand="GridViewLeaveHistory_RowCommand"
OnRowDataBound="GridViewLeaveHistory_RowDataBound" CssClass="Freezing"
OnSelectedIndexChanged="GridViewLeaveHistory_SelectedIndexChanged"
ShowFooter="True" ShowHeaderWhenEmpty="True" width="801px">
解决方案
I think this link also help you : http://www.dotnetspider.com/resources/45019-Scrollable-Gridview-with-fixed-Header-Footer-using-Javascript.aspx
这篇关于固定的GridView头滚动时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
