gridview添加固定表头

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

 

转载于:https://www.cnblogs.com/Xingsoft-555/archive/2011/11/11/2245554.html