方法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>
方法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>
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>