方法1:运行后右键源文件直接把gridview中表头复制出来,在添加到一个div,然后把div的位置覆盖到原表头上。
View Code
<div id=
"
divTitle
" style=
"
position: relative; top: 7px; left: -21px; overflow: hidden;
width: 405px; border: 0px solid red; z-index: 100 " >
<table style= " width: 100%; border: 0px solid #CCCCCC; " cellspacing= " 0 ">
<!-- 从gridview中复制出来的表头-->
<tr style= " color: Black; background-color: #CCCCCC; font-weight: bold; white-space: nowrap; ">
<th scope= " col ">
<input id= " chkAll " οnclick= " javascript:SelectAllCheckboxes(this); " type= " checkbox " />全选
</th>
<th scope= " col ">
编号
</th>
<th scope= " col ">
处理人
</th>
</tr>
<!---->
</table>
</div>
width: 405px; border: 0px solid red; z-index: 100 " >
<table style= " width: 100%; border: 0px solid #CCCCCC; " cellspacing= " 0 ">
<!-- 从gridview中复制出来的表头-->
<tr style= " color: Black; background-color: #CCCCCC; font-weight: bold; white-space: nowrap; ">
<th scope= " col ">
<input id= " chkAll " οnclick= " javascript:SelectAllCheckboxes(this); " type= " checkbox " />全选
</th>
<th scope= " col ">
编号
</th>
<th scope= " col ">
处理人
</th>
</tr>
<!---->
</table>
</div>
方法2:asp.net中的gridview添加固定表头,原理就是用js复制了一个gridview的表头,添加到一个div中,在把gridview中表头给覆盖住。
JS代码:(用setTimeout调用gHeader方法,如果直接使用gHeader中的if方法会报gdvList' 为空或不是对象,要再Gridview控件初始化完成之后调用js)
<script type=
"
text/javascript
" defer=
"
defer
">
setTimeout(gHeader, 100);
function gHeader() {
if (document.getElementById( " gvTitle ") == null) {
var gdvList = document.getElementById( " GridView2 ");
var gdvHeader = gdvList.cloneNode( true);
gdvHeader.id = " gvTitle ";
for (i = gdvHeader.rows.length - 1; i > 0; i--) {
gdvHeader.deleteRow(i);
}
document.getElementById( " divTitle ").appendChild(gdvHeader);
var div = document.getElementById( " divGvData ");
var tbl = document.getElementById( " divTitle ");
tbl.style.position = " absolute ";
tbl.style.zIndex = 100;
tbl.style.top = div.offsetTop;
tbl.style.left = div.offsetLeft;
}
}
function SelectAllCheckboxes(spanChk) {
var oItem = spanChk.children;
var theBox = (spanChk.type == "checkbox") ? spanChk : spanChk.children.item[0];
xState = theBox.checked;
var elm = theBox.form.elements;
for (i = 0; i < elm.length; i++)
if (elm[i].type == "checkbox") {
if (elm[i].checked != xState)
elm[i].click();
}
}
</script>
setTimeout(gHeader, 100);
function gHeader() {
if (document.getElementById( " gvTitle ") == null) {
var gdvList = document.getElementById( " GridView2 ");
var gdvHeader = gdvList.cloneNode( true);
gdvHeader.id = " gvTitle ";
for (i = gdvHeader.rows.length - 1; i > 0; i--) {
gdvHeader.deleteRow(i);
}
document.getElementById( " divTitle ").appendChild(gdvHeader);
var div = document.getElementById( " divGvData ");
var tbl = document.getElementById( " divTitle ");
tbl.style.position = " absolute ";
tbl.style.zIndex = 100;
tbl.style.top = div.offsetTop;
tbl.style.left = div.offsetLeft;
}
}
function SelectAllCheckboxes(spanChk) {
var oItem = spanChk.children;
var theBox = (spanChk.type == "checkbox") ? spanChk : spanChk.children.item[0];
xState = theBox.checked;
var elm = theBox.form.elements;
for (i = 0; i < elm.length; i++)
if (elm[i].type == "checkbox") {
if (elm[i].checked != xState)
elm[i].click();
}
}
</script>
aspx 页面代码:
View Code
<div style=
"
width: 410px; height: 180px; overflow-x: hidden; overflow-y: auto
" id=
"
dvBody
">
<div id= " divTitle " style= " position: relative; top:10px; left:0px; overflow: hidden;
width:400px; border: 0px solid red; " >
</div>
<div id= " divGvData " runat= " server " style= " position: relative; top:0px; left:0px;
overflow-x: hidden; overflow-y: auto; width: 400px; height: 180px; " class= "bar "
<asp:GridView ID= " GridView2 " runat= " server " AutoGenerateColumns= " False " DataKeyNames= " ProcessorID,Processor "
Width= " 405px " BackColor= " White " BorderColor= " #999999 " BorderStyle= " Solid " BorderWidth= " 1px "
CellPadding= " 3 " ForeColor= " Black " GridLines= " Vertical ">
<Columns>
<asp:TemplateField HeaderText= " 全选 ">
<HeaderTemplate>
<input id= " chkAll " οnclick= " javascript:SelectAllCheckboxes(this); " type= " checkbox " />全选
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID= " CheckBox1 " runat= " server " />
</ItemTemplate>
<ItemStyle HorizontalAlign= " Center " />
</asp:TemplateField>
<asp:BoundField DataField= " ProcessorID " HeaderText= " 编号 " ItemStyle-HorizontalAlign= " Center "
ReadOnly= " True " SortExpression= " ProcessorID ">
<ItemStyle HorizontalAlign= " Center "></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField= " Processor " HeaderText= " 处理人 " ItemStyle-HorizontalAlign= " Center "
ReadOnly= " True ">
<ItemStyle HorizontalAlign= " Center "></ItemStyle>
</asp:BoundField>
</Columns>
<FooterStyle BackColor= " #CCCCCC " />
<PagerStyle BackColor= " #999999 " ForeColor= " Black " HorizontalAlign= " Center " />
<SelectedRowStyle BackColor= " #000099 " Font-Bold= " True " ForeColor= " White " />
<HeaderStyle BackColor= " #CCCCCC " Font-Bold= " True " ForeColor= " Black " Wrap= " false "
/>
<AlternatingRowStyle BackColor= " #CCCCCC " />
</asp:GridView>
</div>
</div>
<div id= " divTitle " style= " position: relative; top:10px; left:0px; overflow: hidden;
width:400px; border: 0px solid red; " >
</div>
<div id= " divGvData " runat= " server " style= " position: relative; top:0px; left:0px;
overflow-x: hidden; overflow-y: auto; width: 400px; height: 180px; " class= "bar "
<asp:GridView ID= " GridView2 " runat= " server " AutoGenerateColumns= " False " DataKeyNames= " ProcessorID,Processor "
Width= " 405px " BackColor= " White " BorderColor= " #999999 " BorderStyle= " Solid " BorderWidth= " 1px "
CellPadding= " 3 " ForeColor= " Black " GridLines= " Vertical ">
<Columns>
<asp:TemplateField HeaderText= " 全选 ">
<HeaderTemplate>
<input id= " chkAll " οnclick= " javascript:SelectAllCheckboxes(this); " type= " checkbox " />全选
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID= " CheckBox1 " runat= " server " />
</ItemTemplate>
<ItemStyle HorizontalAlign= " Center " />
</asp:TemplateField>
<asp:BoundField DataField= " ProcessorID " HeaderText= " 编号 " ItemStyle-HorizontalAlign= " Center "
ReadOnly= " True " SortExpression= " ProcessorID ">
<ItemStyle HorizontalAlign= " Center "></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField= " Processor " HeaderText= " 处理人 " ItemStyle-HorizontalAlign= " Center "
ReadOnly= " True ">
<ItemStyle HorizontalAlign= " Center "></ItemStyle>
</asp:BoundField>
</Columns>
<FooterStyle BackColor= " #CCCCCC " />
<PagerStyle BackColor= " #999999 " ForeColor= " Black " HorizontalAlign= " Center " />
<SelectedRowStyle BackColor= " #000099 " Font-Bold= " True " ForeColor= " White " />
<HeaderStyle BackColor= " #CCCCCC " Font-Bold= " True " ForeColor= " Black " Wrap= " false "
/>
<AlternatingRowStyle BackColor= " #CCCCCC " />
</asp:GridView>
</div>
</div>