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" onclick="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" onclick="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>