Cách đóng băng đầu đề của chế độ xem lưới [gridview và chiều rộng cột không cố định]

Question

Tôi đang triển khai tiêu đề cố định Gridview với thanh cuộn dọc. Tôi đã thử rất nhiều giải pháp đã được đề xuất ở đây. Nhưng vấn đề là,

1. Gridview nằm trong bảng điều khiển có chiều rộng không cố định. 97% của nó.

2.Các cột không có chiều rộng cố định.

Tôi đã thử giải pháp được đề xuất trong GridviewScroll.js, nhưng vấn đề là với chiều rộng cố định và GridView không thay đổi kích thước theo kích thước cửa sổ.

tôi đã cố gắng quá nhiều giải pháp nhưng không hoạt động mà không chiều rộng cố định, vì vậy tôi không thể trình bày rằng đây ..

Dưới đây là mã

  <asp:Panel ID="panel_gridholder" runat="server" style="position:absolute;left:10px;width:97%; min-width:1020px;margin-top:3px;margin-bottom:20px;overflow:auto;" > 


      <asp:GridView ID="GridView_Vehicle" runat="server" AutoGenerateColumns="False" AllowSorting="true" PagerSettings-Position="TopAndBottom" 
       OnPageIndexChanging="GridView_Vehicle_PageIndexChanging" OnSorting="GridView_Vehicle_Sorting" PageSize="100" 
       GridLines="None" AllowPaging="true" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt"> 
       <Columns> </Columns> 
      </asp:GridView> 

      <div style="height: 400px"></div> 
     </asp:Panel> 

Bất kỳ lời đề nghị của tôi hiện tại?

Answer 1

Tôi muốn sử dụng DataTables. Ngoài việc làm những gì bạn muốn (như tôi hiểu được yêu cầu của bạn), nó đã trưởng thành, ổn định và có khả năng hơn thế nữa.

Tôi tạo ra một JsFiddle để chứng minh: https://jsfiddle.net/objo18f9/3/

Trong Fiddle: tiêu đề được cố định với di chuyển theo chiều dọc của nội dung; không có kích thước cột được chỉ định (chúng sẽ thay đổi kích thước khi bạn kéo dải phân cách giữa (Fiddle) sang trái hoặc phải và bảng được bao quanh bởi div được đặt thành 97% chiều rộng trang (từ bộ nhớ là bảng điều khiển được trả lại như trong ASP.Net); và phân trang được bật

Dưới đây là ví dụ tương tự như một số câu liên quan Code:

$(document).ready(function() { 
 
    $('#example').DataTable({ 
 
    "scrollY": "200px", 
 
    "scrollCollapse": true, 
 
    "paging": true 
 
    }); 
 
});

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> 
 

 
<div width="97%"> 
 
    <table id="example" class="display" width="100%" cellspacing="0"> 
 
    <thead> 
 
     <tr> 
 
     <th>Name</th> 
 
     <th>Position</th> 
 
     <th>Office</th> 
 
     <th>Age</th> 
 
     <th>Start date</th> 
 
     <th>Salary</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>Tiger Nixon</td> 
 
     <td>System Architect</td> 
 
     <td>Edinburgh</td> 
 
     <td>61</td> 
 
     <td>2011/04/25</td> 
 
     <td>$320,800</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Garrett Winters</td> 
 
     <td>Accountant</td> 
 
     <td>Tokyo</td> 
 
     <td>63</td> 
 
     <td>2011/07/25</td> 
 
     <td>$170,750</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Ashton Cox</td> 
 
     <td>Junior Technical Author</td> 
 
     <td>San Francisco</td> 
 
     <td>66</td> 
 
     <td>2009/01/12</td> 
 
     <td>$86,000</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Cedric Kelly</td> 
 
     <td>Senior Javascript Developer</td> 
 
     <td>Edinburgh</td> 
 
     <td>22</td> 
 
     <td>2012/03/29</td> 
 
     <td>$433,060</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Airi Satou</td> 
 
     <td>Accountant</td> 
 
     <td>Tokyo</td> 
 
     <td>33</td> 
 
     <td>2008/11/28</td> 
 
     <td>$162,700</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Brielle Williamson</td> 
 
     <td>Integration Specialist</td> 
 
     <td>New York</td> 
 
     <td>61</td> 
 
     <td>2012/12/02</td> 
 
     <td>$372,000</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Herrod Chandler</td> 
 
     <td>Sales Assistant</td> 
 
     <td>San Francisco</td> 
 
     <td>59</td> 
 
     <td>2012/08/06</td> 
 
     <td>$137,500</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Rhona Davidson</td> 
 
     <td>Integration Specialist</td> 
 
     <td>Tokyo</td> 
 
     <td>55</td> 
 
     <td>2010/10/14</td> 
 
     <td>$327,900</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Colleen Hurst</td> 
 
     <td>Javascript Developer</td> 
 
     <td>San Francisco</td> 
 
     <td>39</td> 
 
     <td>2009/09/15</td> 
 
     <td>$205,500</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Sonya Frost</td> 
 
     <td>Software Engineer</td> 
 
     <td>Edinburgh</td> 
 
     <td>23</td> 
 
     <td>2008/12/13</td> 
 
     <td>$103,600</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Jena Gaines</td> 
 
     <td>Office Manager</td> 
 
     <td>London</td> 
 
     <td>30</td> 
 
     <td>2008/12/19</td> 
 
     <td>$90,560</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Quinn Flynn</td> 
 
     <td>Support Lead</td> 
 
     <td>Edinburgh</td> 
 
     <td>22</td> 
 
     <td>2013/03/03</td> 
 
     <td>$342,000</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Charde Marshall</td> 
 
     <td>Regional Director</td> 
 
     <td>San Francisco</td> 
 
     <td>36</td> 
 
     <td>2008/10/16</td> 
 
     <td>$470,600</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Haley Kennedy</td> 
 
     <td>Senior Marketing Designer</td> 
 
     <td>London</td> 
 
     <td>43</td> 
 
     <td>2012/12/18</td> 
 
     <td>$313,500</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Tatyana Fitzpatrick</td> 
 
     <td>Regional Director</td> 
 
     <td>London</td> 
 
     <td>19</td> 
 
     <td>2010/03/17</td> 
 
     <td>$385,750</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Michael Silva</td> 
 
     <td>Marketing Designer</td> 
 
     <td>London</td> 
 
     <td>66</td> 
 
     <td>2012/11/27</td> 
 
     <td>$198,500</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Paul Byrd</td> 
 
     <td>Chief Financial Officer (CFO)</td> 
 
     <td>New York</td> 
 
     <td>64</td> 
 
     <td>2010/06/09</td> 
 
     <td>$725,000</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Gloria Little</td> 
 
     <td>Systems Administrator</td> 
 
     <td>New York</td> 
 
     <td>59</td> 
 
     <td>2009/04/10</td> 
 
     <td>$237,500</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Bradley Greer</td> 
 
     <td>Software Engineer</td> 
 
     <td>London</td> 
 
     <td>41</td> 
 
     <td>2012/10/13</td> 
 
     <td>$132,000</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Dai Rios</td> 
 
     <td>Personnel Lead</td> 
 
     <td>Edinburgh</td> 
 
     <td>35</td> 
 
     <td>2012/09/26</td> 
 
     <td>$217,500</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Nếu bạn nói với ASP.Net sử dụng a. Id tĩnh: <asp:GridView ID="GridView_Vehicle" ClientIDMode="static" ... thì bạn có thể tham khảo bảng của mình là: $('#GridView_Vehicle').DataTable({ ... });

Answer 2

Dưới đây là một giải pháp cho một mạng lưới với một số trung bình của hàng (và nếu bạn có nhiều hơn thế, bạn có thể muốn sử dụng phân trang nhỏ hơn kích thước thay vì di chuyển):

Tạo hai yếu tố GridView với cùng một đặc điểm kỹ thuật và nguồn dữ liệu, ngoại trừ cái thứ hai có ShowHeader = "false". Đặt đầu tiên bên trong một div với style = "height: 38px; overflow: hidden" (bạn có thể cần phải điều chỉnh chiều cao dựa trên font được sử dụng cho tiêu đề của bạn). Đặt thứ hai bên trong một div với style = "max-height: 400px; overflow: auto" (điều chỉnh chiều cao dựa trên số hàng bạn muốn hiển thị). Vì cả hai bảng đều sử dụng cùng một dữ liệu nên chúng phải xếp hàng chính xác và thứ hai sẽ có thể cuộn được. Nếu bạn muốn kích hoạt sắp xếp, hãy thực hiện nó trên máy chủ với nguồn dữ liệu được chia sẻ và đặt GridView thứ hai bên trong UpdatePanel với một AsyncPostBackTrigger trỏ đến cái đầu tiên. Đây là mã cho ví dụ của bạn:

<asp:Panel ID="panel_gridholder" runat="server" style="position:absolute;left:10px;width:97%; min-width:1020px;margin-top:3px;margin-bottom:20px;" > 
    <div style="height:38px; overflow:hidden"> 
     <asp:GridView ID="GridView_Vehicle_Header" runat="server" AutoGenerateColumns="False" ShowHeaderWhenEmpty="true" AllowSorting="true" OnSorting="GridView_Vehicle_Sorting" GridLines="None" CssClass="mGrid" AlternatingRowStyle-CssClass="alt"> 
      <Columns> </Columns> 
     </asp:GridView> 
    </div> 
    <div style="max-height:400px; overflow:auto"> 
     <asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="Conditional"> 
      <ContentTemplate> 
      <asp:GridView ID="GridView_Vehicle" runat="server" AutoGenerateColumns="False" ShowHeader="false" AllowSorting="true" OnSorting="GridView_Vehicle_Sorting" GridLines="None" CssClass="mGrid" AlternatingRowStyle-CssClass="alt"> 
       <Columns> </Columns> 
      </asp:GridView> 
      </ContentTemplate> 
      <Triggers> 
      <asp:AsyncPostBackTrigger ControlID="GridView_Vehicle_Header" /> 
      </Triggers> 
     </asp:UpdatePanel> 
    </div> 
</asp:Panel>