网格视图固定标题

Question

我需要修复网格视图的标题。我试过 jscript 文件，

        <div class="Container"  style="width: 816px; height: 319px;">
                                                        <asp:GridView 
                                                        ID="GrdViewMyTasks" runat="server" AllowSorting="True" 
                                                        AutoGenerateColumns="False" BackColor="White" BorderColor="#0061C1" 
                                                        BorderStyle="None" CaptionAlign="Bottom" EmptyDataText="No Records Found" 
                                                        Font-Names="Verdana" Font-Size="X-Small" ForeColor="#0061C1"  
                                                        OnRowDataBound="GrdViewMyTasks_RowDataBound" width="99%" Height="247px"
                                                        onselectedindexchanged="GrdViewMyTasks_SelectedIndexChanged" ShowFooter="True" 
                                                        ShowHeaderWhenEmpty="True" >
                                                        <Columns>
                                                        <asp:BoundField DataField="TaskID" HeaderText="SL No" >
                                                                <FooterStyle BackColor="#0061C1" />
                                                                <HeaderStyle BackColor="#0061C1" HorizontalAlign="Center" 
                                                                VerticalAlign="Middle"  />
                                                              <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                                             </asp:BoundField>
                                                             <asp:TemplateField HeaderText="Task Name">
                                                             <ItemTemplate>
                                                                <asp:Label ID="TaskName" runat="server" 
                                                                    Font-Names="Verdana" Font-Size="X-Small" Height="24px" 
                                                                    Text='<%# Eval("TaskName")%>' Width="70px"></asp:Label>
                                                            </ItemTemplate>
                                                            <FooterStyle BackColor="#0061C1" />
                                                            <HeaderStyle BackColor="#0061C1" ForeColor="White"   />
                                                            <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                                            </asp:TemplateField>
                                                            <asp:TemplateField HeaderText="Due Date">
                                                            <ItemTemplate>
                                                            <asp:Label 
                                                                    ID="DueDate" runat="server" DataFormatString="{0:dd/MM/yyyy}" 
                                                                    Font-Names="Verdana" Font-Size="X-Small" Height="20px" 
                                                                    Text='<%# Eval("DueDate","{0:dd/MM/yyyy}")%>' Width="70px"></asp:Label>
                                                            </ItemTemplate>
                                                            <FooterStyle BackColor="#0061C1" />
                                                            <HeaderStyle BackColor="#0061C1" ForeColor="White"   />
                                                            <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                                            </asp:TemplateField>
                                                            <asp:TemplateField HeaderText="Description">
                                                            <ItemTemplate>
                                                            <asp:Label 
                                                                    ID="Description" runat="server" Font-Names="Verdana" Font-Size="X-Small" 
                                                                    Height="20px" Text='<%# Eval("Description")%>' Width="90px"></asp:Label>
                                                            </ItemTemplate>
                                                            <FooterStyle BackColor="#0061C1" />
                                                            <HeaderStyle BackColor="#0061C1" ForeColor="White"  />
                                                            <ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" />
                                                            </asp:TemplateField>
                                                            <asp:TemplateField HeaderText="Assign By">
                                                            <ItemTemplate>
                                                            <asp:Label 
                                                                    ID="AssignBy" runat="server" Font-Names="Verdana" Font-Size="X-Small" 
                                                                    Height="20px" Text='<%# Eval("AssignBy")%>' Width="80px"></asp:Label>
                                                            </ItemTemplate>
                                                            <FooterStyle BackColor="#0061C1" />
                                                            <HeaderStyle BackColor="#0061C1" ForeColor="White"   />
                                                            <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                                            </asp:TemplateField>
                                                            <asp:TemplateField HeaderText="Status">
                                                            <ItemTemplate>
                                                            <asp:Label 
                                                                    ID="Status" runat="server" Font-Names="Verdana" Font-Size="X-Small" 
                                                                    Height="20px" Text='<%# Eval("Status")%>' Width="60px"></asp:Label>
                                                            </ItemTemplate>
                                                            <FooterStyle BackColor="#0061C1" />
                                                            <HeaderStyle BackColor="#0061C1" ForeColor="White"  />
                                                            <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                                            </asp:TemplateField>
                                                            <asp:TemplateField HeaderText="% Complete">
                                                            <ItemTemplate>
                                                            <asp:Label 
                                                                    ID="PercentageComplete" runat="server" Font-Names="Verdana" Font-Size="X-Small" 
                                                                    Height="20px" Text='<%# Eval("PercentageComplete")%>' Width="70px"></asp:Label>
                                                            </ItemTemplate>
                                                            <FooterStyle BackColor="#0061C1" />
                                                            <HeaderStyle BackColor="#0061C1" ForeColor="White"  />
                                                            <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                                            </asp:TemplateField>
                                                            <asp:TemplateField HeaderText="View Details">
                                                            <ItemTemplate>
                                                            <asp:HyperLink 
                                                                    ID="ViewDetails" runat="server" DataNavigateUrlFields="TaskID" 
                                                                    DataNavigateUrlFormatString="Reports.aspx?TaskID={0}" Font-Names="Verdana" 
                                                                    Font-Size="X-Small" ForeColor="#0061C1" Height="24px" Width="70px"
                                                                    NavigateUrl="Reports.aspx" Text="ViewDetails" >View</asp:HyperLink>
                                                            </ItemTemplate>
                                                            <FooterStyle BackColor="#0061C1" />
                                                            <HeaderStyle BackColor="#0061C1" ForeColor="White"   />
                                                            <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                                                            </asp:TemplateField>
                                                        </Columns>
                                                    </asp:GridView>
                                                    </div>

                  <style type="text/css">

                  .Container
                    {
                        overflow: auto;
                     }
      <script src="jquery-1.4.1.min.js" type="text/javascript"></script>
      <script src="ScrollableGrid.js" type="text/javascript"></script>

       <script type="text/javascript" language="javascript">
          $(document).ready(function () {
           $('#<%=GrdViewMyTasks.ClientID %>').Scrollable();
           }
           )
               </script>

header 得到修复，但 d 网格视图宽度已缩短，并且标题大小已增加.. dsnt 适合 d div 标签.. 我已放置我的网格视图代码和 jquery 文件

Answer 1

你的代码有两个问题：

1. 定位absolute 正在应用于第一个boundfield，这意味着它将应用于第一列中的所有单元格！它也适用于templatefield'sheaderstyle 和footerstyle，但不适用于itemtemplate（无论如何这无关紧要）！此外，它在左上角以 0-0 取胜。因此，难怪您的列合并并合并到最左边的列。

2. 所有这些对表来说毫无意义。您不能在表格单元格上应用定位！您可以将定位应用到整个表格，但单个单元格不行。

解决你的问题的两种方法：

1. 创建您自己的代码来创建一个可滚动的表格。您将必须创建单独的页眉和/或页脚表格。如果不拆分 thead 和/或 tfoot，则无法创建可滚动表格。

2. 去人们推荐给你的图书馆。

Answer 2

尝试js 文件喜欢

<script type="text/javascript" language="javascript">
$(document).ready(function() 
{
$('#<%=GridViewName.ClientID %>').Scrollable();
}
)
</script>

查看jQuery Fixed Header Scrollable GridView

您将从Jquery orignal website 获得ScrollableGrid.js 文件。

希望它对你有用。

Answer 3

这可能会有所帮助：http://www.fixedheadertable.com/ - 它是更可靠的跨浏览器。尽管您可能不得不说服 ASP.NET 呈现 <th> 标签：How do I get Gridview to render THEAD?