固定GridView的Header和Footer

最新推荐文章于 2017-07-17 16:56:13 发布

a3391111

最新推荐文章于 2017-07-17 16:56:13 发布

阅读量251

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/Dannier/archive/2012/04/18/2455762.html

版权

固定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>

本来想做个例子上传，但是想想，好像没什么必要啦!大家看看，这个刚刚写好就发上来了，肯定有很多要修改的地方。欢迎提问。

有时间，把这些代码集成到一个插件里面。

转载于:https://www.cnblogs.com/Dannier/archive/2012/04/18/2455762.html

a3391111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
固定GridView的Header和Footer

固定GridView的Header和Footer　　小提示：当数据量比较大时，我们通常是使用的方式是对数据进行分页显示。GridView支持数据分页，开发人员的工作量不大，页面亦可以减少因为增加了滚动条而带来多余操作。　　有这样的需求，客户要求每页至少有100条记录显示。而且，在拖动竖直滚动条的时候，GridView的头（header）和尾（footer）都要可见。　　解决方...
复制链接

扫一扫