Сетчатый просмотр фиксированного заголовка

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> 

заголовка получает frixed, но ширина вида d сетки сокращена и размер заголовка был увеличен .. он dsnt получает подходит с d сНом тегом .. я поместил мой вид сетки код и файл Jquery

Answer 1

Просто попробуйте js файл как

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

Проверьте это jQuery Fixed Header Scrollable GridView

вы получите ScrollableGrid.js файл из Jquery orignal website.

Надеюсь, это сработает для вас.

Answer 2

Это может помочь: http://www.fixedheadertable.com/ - это более надежный кросс-браузер. Хотя вы, возможно, придется убедить ASP.NET для визуализации <th> теги: How do I get Gridview to render THEAD?

Answer 3

Две проблемы с вашим кодом:

1. позиционирования absolute прикладывается к первому boundfield, который означает, что она будет применяться ко всем ячейкам в первой колонке! Он также применяется к templatefield'sheaderstyle и footerstyle, но не к itemtemplate (в любом случае это не имеет значения)! Кроме того, он поднимает верхние левые 0-0. Поэтому неудивительно, что ваши столбцы сливаются и сливаются с самой левой колонкой.

2. Все это не имеет никакого смысла для стола. Вы не можете применять позиционирование на ячейках таблицы! Вы можете применить позиционирование ко всей таблице, но отдельные ячейки, nopes.

Два решения вашей проблемы:

1. Создайте свой собственный код, чтобы создать прокручивать таблицу. You WILL должны создавать отдельные таблицы верхнего и нижнего колонтитулов. Вы не можете создать прокручиваемую таблицу без разделения thead и/или tfoot.

2. Идти по библиотекам, которые вам рекомендовали.