固定GridView的Header和Footer

本文轉載自查看原文 2012-04-18 18:25 3559 JavaScript/ .NET/ JQuery/ ASP.NET GridView

固定GridView的Header和Footer

　　小提示：當數據量比較大時，我們通常是使用的方式是對數據進行分頁顯示。GridView支持數據分頁，開發人員的工作量不大，頁面亦可以減少因為增加了滾動條而帶來多余操作。

　　有這樣的需求，客戶要求每頁至少有100條記錄顯示。而且，在拖動豎直滾動條的時候，GridView的頭（header）和尾（footer）都要可見。

　　解決方案一：使用在CSS中使用表達式，嚴格控制Header和Footer在網頁中的位置。

　　代碼分享如下：(來源於網上)

Html

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <style type="text/css">
        .GVFixedHeader { font-weight:bold; background-color: Green; position:relative; top:expression(this.parentNode.parentNode.parentNode.scrollTop-1);}
        .GVFixedFooter { font-weight:bold; background-color: Green; position:relative; bottom:expression(getScrollBottom(this.parentNode.parentNode.parentNode.parentNode));}
    </style>
    <script language="javascript" type="text/javascript">
        function getScrollBottom(p_oElem) {
            return p_oElem.scrollHeight - p_oElem.scrollTop - p_oElem.clientHeight;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Panel runat="server" ID="pnlContainer" ScrollBars="Auto" Height="150px" Width="400">
    <asp:GridView ShowFooter="True" runat="server" Width="96%" ID="gvDemo" AutoGenerateColumns="False">
    <HeaderStyle CssClass="GVFixedHeader" />
    <FooterStyle CssClass="GVFixedFooter" />
        <Columns>
            <asp:TemplateField HeaderText="C1">
                <ItemTemplate>
                    <asp:Label ID="Label2" runat="server" Text='<%# Bind("C1") %>'></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    C1 Footer Here
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="C2">
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("C2") %>'></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    C2 Footer Here
                </FooterTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
   </asp:Panel>
    </div>
    </form>
</body>
</html>

vb.net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim dt As New DataTable
        dt.Columns.Add("C1")
        dt.Columns.Add("C2")
        Dim drRow As DataRow
        For i As Integer = 0 To 10
            drRow = dt.NewRow
            drRow(0) = "C1" & i
            drRow(1) = "C2" & i
            dt.Rows.Add(drRow)
        Next
        Me.gvDemo.DataSource = dt
        Me.gvDemo.DataBind()
    End Sub

　　1. 首先不用去管里面到底是怎么實現的，把代碼在本地跑跑，看看好不好用。

　　2.恩，不錯，貌似還可以用。

　　3.為什么有這么一句代碼呢！ <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

　　　　Windows Internet Explorer 8 引入了文本兼容性模式，該模式允許 Web 開發人員將瀏覽器設置為以與舊版本相同的方式顯示網頁。詳情

　　解決方案二：使用jQuery固定Header和Footer

　　哎！都說JQuery的自定義插件很豐富。所以，我也在網上找了找，有很多不錯的插件，但是，為什么都是只實現了固定Header。下面分享一個插件代碼

ScrollableGridPlugin.js

(function ($) {
    $.fn.Scrollable = function (options) {
        var defaults = {
            ScrollHeight: 300,
            Width: 0
        };
        var options = $.extend(defaults, options);
        return this.each(function () {
            var grid = $(this).get(0);
            var gridWidth = grid.offsetWidth;
            var gridHeight = grid.offsetHeight;
            var headerCellWidths = new Array();
            for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) {
                headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
            }
            grid.parentNode.appendChild(document.createElement("div"));
            var parentDiv = grid.parentNode;

            var table = document.createElement("table");
            for (i = 0; i < grid.attributes.length; i++) {
                if (grid.attributes[i].specified && grid.attributes[i].name != "id") {
                    table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
                }
            }
            //Header
            table.style.cssText = grid.style.cssText;
            table.style.width = gridWidth + "px";
            table.appendChild(document.createElement("tbody"));
            table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
            var cells = table.getElementsByTagName("TH");

            var gridRow = grid.getElementsByTagName("TR")[0];
            for (var i = 0; i < cells.length; i++) {
                var width;
                if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
                    width = headerCellWidths[i];
                }
                else {
                    width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
                }
                cells[i].style.width = parseInt(width - 3) + "px";
                gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
            }
            parentDiv.removeChild(grid);

            var dummyHeader = document.createElement("div");
            dummyHeader.appendChild(table);
            parentDiv.appendChild(dummyHeader);

            if (options.Width > 0) {
                gridWidth = options.Width;
            }
            var scrollableDiv = document.createElement("div");
            if (parseInt(gridHeight) > options.ScrollHeight) {
                gridWidth = parseInt(gridWidth) + 17;
            }
            scrollableDiv.style.cssText = "overflow:auto;height:" + options.ScrollHeight + "px;width:" + gridWidth + "px";
            scrollableDiv.appendChild(grid);
            parentDiv.appendChild(scrollableDiv);
        });
    };
})(jQuery);

　把代碼引入到你的頁面中，然后像這樣調用就行，就是這么簡單。哈哈！

$('#<%=gvDemo.ClientID %>').Scrollable({
                ScrollHeight: 100,
                Width: 380
            });

　　高興的太早了，還要固定Footer呢！我自己寫了一段測試的例子，實現了固定Footer的功能，代碼分享如下。

$(function () {
            var FooterCellWidths = new Array();
            var grid = $("table[id*=gvDemo]");
            grid.find("th").each(function (i) {
                FooterCellWidths[i] = $(this).width();
            });

            var gridWidth = grid[0].offsetWidth;
            var footer = grid.clone();
            footer.empty();

            var table = document.createElement("table");
            for (i = 0; i < grid[0].attributes.length; i++) {
                if (grid[0].attributes[i].specified && grid[0].attributes[i].name != "id") {
                    table.setAttribute(grid[0].attributes[i].name, grid[0].attributes[i].value);
                }
            }
            table.style.cssText = grid[0].style.cssText;
            table.style.width = gridWidth + "px";
            table.appendChild(document.createElement("tbody"));
            var rownum = grid[0].getElementsByTagName("TR").length;
            table.getElementsByTagName("tbody")[0].appendChild(grid[0].getElementsByTagName("TR")[rownum - 1]);
            var cells = table.getElementsByTagName("TD");
            var gridRow = grid[0].getElementsByTagName("TR")[grid[0].getElementsByTagName("TR").length - 1];

            for (var i = 0; i < cells.length; i++) {
                var width;
                if (FooterCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
                    width = FooterCellWidths[i];
                }
                else {
                    width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
                }
                cells[i].style.width = parseInt(width - 3) + "px";
                gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
            }

            $("#container").height(270);
            $("#container").width(gridWidth);
            $("#container").append(table);
            $("#container").after(footer);

            $('#<%=gvDemo.ClientID %>').Scrollable({
                ScrollHeight: 100,
                Width: 380
            });

        });
    </script>

html

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="GridViewFixedHeader.aspx.vb" Inherits="JQuerySample.GridViewFixedHeader" %>

<!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" language="javascript" src="../Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" language="javascript" src="../Scripts/Plugin/ScrollableGridPlugin.js"></script>
    <script type="text/javascript" language="javascript">
        $(function () {

            var FooterCellWidths = new Array();
            var grid = $("table[id*=gvDemo]");
            grid.find("th").each(function (i) {
                FooterCellWidths[i] = $(this).width();
            });

            var gridWidth = grid[0].offsetWidth;

            var footer = grid.clone();
            footer.empty();

            var table = document.createElement("table");
            for (i = 0; i < grid[0].attributes.length; i++) {
                if (grid[0].attributes[i].specified && grid[0].attributes[i].name != "id") {
                    table.setAttribute(grid[0].attributes[i].name, grid[0].attributes[i].value);
                }
            }
            table.style.cssText = grid[0].style.cssText;
            table.style.width = gridWidth + "px";
            table.appendChild(document.createElement("tbody"));
            var rownum = grid[0].getElementsByTagName("TR").length;
            table.getElementsByTagName("tbody")[0].appendChild(grid[0].getElementsByTagName("TR")[rownum - 1]);
            var cells = table.getElementsByTagName("TD");
            var gridRow = grid[0].getElementsByTagName("TR")[grid[0].getElementsByTagName("TR").length - 1];

            for (var i = 0; i < cells.length; i++) {
                var width;
                if (FooterCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) {
                    width = FooterCellWidths[i];
                }
                else {
                    width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
                }
                cells[i].style.width = parseInt(width - 3) + "px";
                gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
            }

            $("#container").height(270);
            $("#container").width(gridWidth);
            $("#container").append(table);
            $("#container").after(footer);

            $('#<%=gvDemo.ClientID %>').Scrollable({
                ScrollHeight: 100,
                Width: 380
            });

        });
    </script>
     
</head>
<body>
    <form id="form1" runat="server">
    <asp:Panel runat="server" ID="pnlContainer" ScrollBars="Auto" Height="600px" Width="400">
        <div id="container">
    <asp:GridView ShowFooter="True" runat="server" Width="380" ID="gvDemo" AutoGenerateColumns="False">
        <Columns>
            <asp:TemplateField HeaderText="C1">
                <ItemTemplate>
                    <asp:Label ID="Label2" runat="server" Text='<%# Bind("C1") %>'></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    <asp:Label ID="lblBlank" runat="server" Text="C1 Footer Here" Width="97px"></asp:Label>
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="C2">
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("C2") %>'></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    <asp:Label ID="lblCount" runat="server" Text='C2 Footer Here' Width="97px"></asp:Label>
                </FooterTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView></div>
   </asp:Panel>
    </form>
</body>
</html>

本來想做個例子上傳，但是想想，好像沒什么必要啦!大家看看，這個剛剛寫好就發上來了，肯定有很多要修改的地方。歡迎提問。

有時間，把這些代碼集成到一個插件里面。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 tableview的header和footer取消懸停或者是粘滯 HTML5+CSS把footer固定在底部小程序--引用公共模板方法/共同header/footer HTML中--定義header和footer高度中間自適應 ListView中動態顯示和隱藏Header&Footer 【技巧篇】解決懸浮的

、