利用JQuery实现固定表头,兼容IE7/8 & FF

时间:2021-07-05 04:00:49

项目中遇到需要固定GridView表头,这个问题困扰了我很久,搜索了很多,尝试过很多办法,以下是我自己琢磨出来的方法,写出来和大家分享一下。

  我在做的这个项目中需要大量用到JQuery,这个部分是利用JQuery的AJAX在后台绑定GridView之后再丢到前端处理,如果我把一堆代码全放上来会显的很莫名其妙,所以实际用到的使用方法跟下面要讲的有一点出入,只是讲一下大概思想。

  效果图传不上来,只能贴代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>未命名頁面</title>
    <script type="text/javascript" src="../Pub/Js/jquery.js"></script>
    <script type="text/javascript">
    function fixTableHeader(gv,scrollHeight)
    {
        var gvn=$(gv).clone(true).removeAttr("id");
        $(gvn).find("tr:not(:first)").remove();
        $(gv).before(gvn);
        $(gv).find("tr:first").remove();
        $(gv).wrap("<div style='height:"+ scrollHeight +"px; overflow-y: scroll;overflow-x:hidden; overflow: auto; padding: 0;margin: 0;'></div>");
    }
   
    </script>
</head>
<body>
    <form id="form1" runat="server" >
    <div style="width:400px;">
    <table id="table1" width="100%">
        <thead>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
        </thead>
        <tbody>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
            <tr><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td style="width:100px;">head1</td><td>head1</td></tr>
        </tbody>
    </table>
</div>


<script type="text/javascript">

    //固定表头
    fixTableHeader("#table1",100);
</script>


    </form>
</body>
</html>

*代码很简单,相信有一点JQuery基础的都可以很轻易的看懂,要注意:

1.调用固定表头函数(fixTableHeader)的语句一定要放在table之后,因为在载入之后才能找到该table。

2.table的表头各栏和内容各栏的宽度全都要设定,除了最右边一栏;最右边一栏的宽度不能设定

3.table的宽度设为"100%"

4.table外的div宽度要设定的比table的所有列宽之和(除了最右列)要大

以上注意点的2、3、4的目的是为了让table的列不移位

 这个方法其实是看过GridViewFixedMultiHeader这个控件的固定表头的方法后想到的,这种直接操作table的方法更适合用于前端ajax的操作。