1.html内容
<html>
<head>
<title>表头固定</title>
</head>
<body>
<id="form1" runat="server">
<div id="resultDiv " style="width: 100%; height: 560px; overflow: auto; margin-top: 10px;
z-index: 101; font-size: 9pt; border: 1px solid #79A8D1;" οnscrοll="on005GridScroll('headerOfGridView','resultDiv')" >
<div id="headerOfGridView " style="display: none; position: absolute; z-index: 100;
width: 100%; height: 30px; overflow: hidden;">
<table id="Table1" cellspacing="0" cellpadding="-1" rules="all" style="position: absolute;
border-top-width: 0px; border-collapse: collapse; border: 2px solid #000000;">
<tr>
<td>
</td>
</tr>
</table>
</div>
<asp:GridView ID="grdDetail " runat="server" AutoGenerateColumns="False" CellPadding="-1"
Style="border: 2px solid #000000;" CellSpacing="0" Font-Size="9pt" OnRowDataBound="grdDetail_RowDataBound">
...........................<!--GridView 内容-->
</Columns>
</asp:GridView>
</div>
</body>
</form>
</html>
2.JavaScript方法:
/*
对象gridview表头复制
grdID: 对象gridview ID
headOfGrdID: 复制表头容器ID
resultDiv: 滚动条作用范围容器(div)ID
*/
function fix005HeaderOfGridView (grdID, headOfGrdID, resultDiv) {
var obj_GridView = document.getElementById(grdID);
var obj_HeaderOfGridView = document.getElementById(headOfGrdID);
var obj_DivOfGridView = document.getElementById(resultDiv);
if (obj_GridView.rows.length > 1) {
var widthOfGridView = obj_GridView.offsetWidth;
obj_HeaderOfGridView.childNodes[0].width = widthOfGridView;
var newHeaderRow = obj_HeaderOfGridView.childNodes[0].childNodes[0].childNodes[0];
var headerRow = obj_GridView.rows[0].cloneNode(true);
newHeaderRow.parentNode.replaceChild(headerRow, newHeaderRow);
newHeaderRow = obj_HeaderOfGridView.childNodes[0].childNodes[0].childNodes[0];
for (var index = 0; index < obj_GridView.rows[0].cells.length; index++) {
var headerCell = obj_GridView.rows[0].cells[index];
var cell_HeaderCopied = newHeaderRow.cells[index];
var vWidth = headerCell.clientWidth;
var paddingOfHeader = parseInt(headerCell.currentStyle.paddingLeft) + parseInt(headerCell.currentStyle.paddingRight);
cell_HeaderCopied.style.width = vWidth - paddingOfHeader;
}
obj_HeaderOfGridView.childNodes[0].style.tableLayout = "fixed";
obj_HeaderOfGridView.style.display = "block";
// obj_DivOfGridView.style.height = "560px"; //obj_DivOfGridView.clientHeight;
}
}
/*
gridview 容器滚动条事件处理
headOfGrdID:表头容器ID
resultDiv: 滚动条控制范围容器ID
*/
function on005GridScroll (headOfGrdID, resultDiv) {
var tbHeaderObj = document.getElementById(headOfGrdID);
var divObj = document.getElementById(resultDiv);
var LeftOfHeaderTable = tbHeaderObj.offsetLeft;
var TopOfHeaderTable = tbHeaderObj.offsetTop;
tbHeaderObj.childNodes[0].style.left = 0 - divObj.scrollLeft;
tbHeaderObj.style.top = 132;//表头容器显示绝对位置
tbHeaderObj.style.left = 1;//表头容器显示绝对位置
}
3.调用方法
在web页面对应的CS中调用JavaScript方法fix005HeaderOfGridView
例如:
grdHoZon.DataSource = dtList;
grdHoZon.DataBind();
//在gridview数据绑定结束后调用复制表头方法
ScriptManager.RegisterStartupScript(this, this.GetType(), "fix005HeaderOfGridView", "fix005HeaderOfGridView(' grdDetail',' headerOfGridView',' resultDiv'); ", true);