网格视图固定标题

时间:2013-07-05 06:20:32

标签: c# asp.net gridview

我需要修复网格视图的标题。我试过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>

标题被修复但是网格视图宽度已经缩短并且标题大小已经增加..它的dsnt与d div标签一致...我已经放置了我的网格视图代码和jquery文件

3 个答案:

答案 0 :(得分:3)

尝试像js文件一样

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

选中此jQuery Fixed Header Scrollable GridView

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

希望它适合你。

答案 1 :(得分:1)

您的代码存在两个问题

  1. 定位absolute正在应用于第一个boundfield,这意味着它将应用于第一列中的所有单元格!它也适用于templatefield's headerstylefooterstyle,但不适用于itemtemplate(无论如何不相关)!此外,它在左上角为0-0。所以,难怪你的列合并并合并到最左边的列。

  2. 这一切都没有意义。您不能在表格单元格上应用定位!您可以将定位应用于整个表格,但单个单元格,nopes。

  3. 解决问题的两种方法

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

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

答案 2 :(得分:0)

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