none
让GridView的Footer和Header一直显示在屏幕上 RRS feed

  • 问题

  • 做了一个网页,将gridview放在一个限定了高和宽的panel中,由于数据多时panel会出现滚动条,,怎么让GridView的Footer和Header一直显示在屏幕上

    2011年11月24日 8:28

答案

  • 由于IE8之后就停止支持“CSS expression“

    http://msdn.microsoft.com/zh-cn/library/cc304082(v=vs.85).aspx#CSS_表达式

    介于这种情况除了用兼容模式可以显示出原来的效果之外,还有其他方法:

    1.配置兼容模式

    <?xml version="1.0" encoding="utf-8"?>
    <configuration>
      <system.webServer>
        <httpProtocol>
          <customHeaders>
            <clear />
            <add name="X-UA-Compatible" value="IE=EmulateIE7" />
          </customHeaders>
        </httpProtocol>
      </system.webServer>
    </configuration> 
    


     

    2.替代的技术:

    http://msdn.microsoft.com/library/ms537634.aspx

    希望能帮得到您。

    PS: ASP.Net 有专门的论坛:http://social.msdn.microsoft.com/Forums/zh-cn/295/threads


    Best Regards,
    Rocky Yue[MSFT]
    MSDN Community Support | Feedback to us
    2011年11月25日 10:09
    版主
  • 那试试这样

    來源:http://www.dotblogs.com.tw/shadow/archive/2011/11/26/59629.aspx

     

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default6.aspx.cs" Inherits="Default6" Debug="true" %>
    
    <!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>
    </head>
    <body>
        <form id="form1" runat="server">
    
        <%--GridView的數據來源--%>
        <asp:SqlDataSource runat="server" ID="sds_test" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
            SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]" />
         
    
         <%--  cellspacing="0"   border="1" style="border-collapse:collapse;" 為GridView呈現<table>的預設屬性,因為Code-Behind目前找不到抓取方法,所以寫死--%>
        <table cellspacing="0"   border="1" style="border-collapse:collapse;"  >
            <%--GridView Header的Html Code--%>
            <asp:Literal id="li_header" runat="server"  />
            <tr>
                <td id="td_showGridView" runat="server"  >
                 <asp:Panel ID="tablePanel" runat="server"  Height="100px"  ScrollBars="Auto">
            <asp:GridView runat="server" ID="gv_Data" AutoGenerateColumns="False" ShowFooter="True"
                DataKeyNames="CategoryID" DataSourceID="sds_test" 
                onrowdatabound="gv_Data_RowDataBound" ondatabound="gv_Data_DataBound" 
                        >
                
                <Columns>
                    <asp:BoundField DataField="CategoryID" HeaderText="CategoryID"  SortExpression="CategoryID"  ItemStyle-Width="80px" />
                    <asp:BoundField DataField="CategoryName" HeaderText="CategoryName" SortExpression="CategoryName" ItemStyle-Width="105px" />
                    <asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
                </Columns>
            </asp:GridView>
        </asp:Panel>
                </td>
            </tr>
            <%--GridView Footer的Html Code--%>
            <asp:Literal id="li_footer" runat="server" />
        </table>
        
    
        
    
        
         
        </form>
    </body>
    </html>
    
    

     

     

        
        protected void gv_Data_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType==DataControlRowType.Header)
            {
                StringWriter sw=new StringWriter();
                HtmlTextWriter writer=new HtmlTextWriter(sw);
                e.Row.Cells[0].Width = 80;
                e.Row.Cells[1].Width = 105;
                e.Row.RenderControl(writer);
                
                e.Row.Visible = false;
                li_header.Text = sw.ToString();
                
            }
            if (e.Row.RowType == DataControlRowType.Footer)
            {
                e.Row.Cells[0].ColumnSpan = gv_Data.Columns.Count;
                e.Row.Cells[0].HorizontalAlign = HorizontalAlign.Center;
                e.Row.Cells[0].Text = "Footer Hello!";
                e.Row.Cells[1].Visible = false;
                e.Row.Cells[2].Visible = false;
                StringWriter sw = new StringWriter();
                HtmlTextWriter writer = new HtmlTextWriter(sw);
                e.Row.RenderControl(writer);
             
                e.Row.Visible = false;
                li_footer.Text = sw.ToString();
            }
        }
    
    
        protected void gv_Data_DataBound(object sender, EventArgs e)
        {
           td_showGridView.Attributes["colspan"] = gv_Data.Columns.Count.ToString();  
        }
    

     


    Shadowと愉快なコード達

    2011年11月26日 14:11

全部回复

  • How to Fixed GridView's Header and Footer when scrolling?

    在GridView中使用CSS固定上、左表頭(似Excel凍結視窗)(限IE)(含操作錄影)

    参考这两篇可以改出来

     

    <%@ Page Debug="true" Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
        Inherits="_Default" %>
    
    <html>
    <head runat="server">
        <style type="text/css">
            .GVFixedHeader
            {
                font-weight: bold;
                background-color: Green;
                position: relative;
                top: expression(this.offsetParent.scrollTop-2);
             
    
            }
            .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 runat="server">
        <asp:SqlDataSource runat="server" ID="sds_test" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
            SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]" />
        <asp:Panel ID="Panel1" runat="server" Width="300px" Height="150px" ScrollBars="Auto">
            <asp:GridView runat="server" ID="GridView1" AutoGenerateColumns="False" ShowFooter="True"
                DataKeyNames="CategoryID" DataSourceID="sds_test" 
                onrowdatabound="GridView1_RowDataBound">
                <HeaderStyle CssClass="GVFixedHeader" />
                <FooterStyle CssClass="GVFixedFooter" />
                <Columns>
                    <asp:BoundField DataField="CategoryID" HeaderText="CategoryID"  SortExpression="CategoryID" />
                    <asp:BoundField DataField="CategoryName" HeaderText="CategoryName" SortExpression="CategoryName" />
                    <asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
                </Columns>
            </asp:GridView>
        </asp:Panel>
        </form>
    </body>
    </html>
    
    

     

     

        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType==DataControlRowType.Footer)
            {
                e.Row.Cells[0].ColumnSpan = 3;
                e.Row.Cells[0].HorizontalAlign = HorizontalAlign.Center;
                e.Row.Cells[0].Text = "Footer Hello!";
            }
        }
    

     

     


    Shadowと愉快なコード達

    2011年11月24日 19:09
  • 试过这个,发现只能在IE低版本能用,IE8就不能了
    2011年11月25日 0:45
  • 由于IE8之后就停止支持“CSS expression“

    http://msdn.microsoft.com/zh-cn/library/cc304082(v=vs.85).aspx#CSS_表达式

    介于这种情况除了用兼容模式可以显示出原来的效果之外,还有其他方法:

    1.配置兼容模式

    <?xml version="1.0" encoding="utf-8"?>
    <configuration>
      <system.webServer>
        <httpProtocol>
          <customHeaders>
            <clear />
            <add name="X-UA-Compatible" value="IE=EmulateIE7" />
          </customHeaders>
        </httpProtocol>
      </system.webServer>
    </configuration> 
    


     

    2.替代的技术:

    http://msdn.microsoft.com/library/ms537634.aspx

    希望能帮得到您。

    PS: ASP.Net 有专门的论坛:http://social.msdn.microsoft.com/Forums/zh-cn/295/threads


    Best Regards,
    Rocky Yue[MSFT]
    MSDN Community Support | Feedback to us
    2011年11月25日 10:09
    版主
  • 那试试这样

    來源:http://www.dotblogs.com.tw/shadow/archive/2011/11/26/59629.aspx

     

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default6.aspx.cs" Inherits="Default6" Debug="true" %>
    
    <!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>
    </head>
    <body>
        <form id="form1" runat="server">
    
        <%--GridView的數據來源--%>
        <asp:SqlDataSource runat="server" ID="sds_test" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
            SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]" />
         
    
         <%--  cellspacing="0"   border="1" style="border-collapse:collapse;" 為GridView呈現<table>的預設屬性,因為Code-Behind目前找不到抓取方法,所以寫死--%>
        <table cellspacing="0"   border="1" style="border-collapse:collapse;"  >
            <%--GridView Header的Html Code--%>
            <asp:Literal id="li_header" runat="server"  />
            <tr>
                <td id="td_showGridView" runat="server"  >
                 <asp:Panel ID="tablePanel" runat="server"  Height="100px"  ScrollBars="Auto">
            <asp:GridView runat="server" ID="gv_Data" AutoGenerateColumns="False" ShowFooter="True"
                DataKeyNames="CategoryID" DataSourceID="sds_test" 
                onrowdatabound="gv_Data_RowDataBound" ondatabound="gv_Data_DataBound" 
                        >
                
                <Columns>
                    <asp:BoundField DataField="CategoryID" HeaderText="CategoryID"  SortExpression="CategoryID"  ItemStyle-Width="80px" />
                    <asp:BoundField DataField="CategoryName" HeaderText="CategoryName" SortExpression="CategoryName" ItemStyle-Width="105px" />
                    <asp:BoundField DataField="Description" HeaderText="Description" SortExpression="Description" />
                </Columns>
            </asp:GridView>
        </asp:Panel>
                </td>
            </tr>
            <%--GridView Footer的Html Code--%>
            <asp:Literal id="li_footer" runat="server" />
        </table>
        
    
        
    
        
         
        </form>
    </body>
    </html>
    
    

     

     

        
        protected void gv_Data_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType==DataControlRowType.Header)
            {
                StringWriter sw=new StringWriter();
                HtmlTextWriter writer=new HtmlTextWriter(sw);
                e.Row.Cells[0].Width = 80;
                e.Row.Cells[1].Width = 105;
                e.Row.RenderControl(writer);
                
                e.Row.Visible = false;
                li_header.Text = sw.ToString();
                
            }
            if (e.Row.RowType == DataControlRowType.Footer)
            {
                e.Row.Cells[0].ColumnSpan = gv_Data.Columns.Count;
                e.Row.Cells[0].HorizontalAlign = HorizontalAlign.Center;
                e.Row.Cells[0].Text = "Footer Hello!";
                e.Row.Cells[1].Visible = false;
                e.Row.Cells[2].Visible = false;
                StringWriter sw = new StringWriter();
                HtmlTextWriter writer = new HtmlTextWriter(sw);
                e.Row.RenderControl(writer);
             
                e.Row.Visible = false;
                li_footer.Text = sw.ToString();
            }
        }
    
    
        protected void gv_Data_DataBound(object sender, EventArgs e)
        {
           td_showGridView.Attributes["colspan"] = gv_Data.Columns.Count.ToString();  
        }
    

     


    Shadowと愉快なコード達

    2011年11月26日 14:11