ガードビューのヘッダーをフリーズする方法[gridviewと列の幅が固定されていません]

グリッドビューフリーズヘッダーを垂直スクロールバーで実装しています。私はここで提案されている多くのソリューションを試しました。しかし、問題は次のとおりです。ガードビューのヘッダーをフリーズする方法[gridviewと列の幅が固定されていません]

Gridviewは、幅が固定されていないパネルの内側にあります。その97％。

2.列の幅は固定されていません。

GridviewScroll.jsで提案された解決策を試しましたが、問題は固定幅であり、Gridviewはウィンドウサイズごとにサイズが変更されません。

ここ..以下

は私の既存のコード

  <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>

任意の提案であることを？私はあまりにも多くのソリューションを試みたが、何も固定幅なしで動作していないので、私は存在することはできませんか

出典

2017-03-22 Vani

DataTablesを使用します。あなたが望むことを行うことを除けば（私があなたの要求を理解する限り）、それは成熟し、安定しており、はるかに能力があります。フィドルでhttps://jsfiddle.net/objo18f9/3/

：

私は実証するJsFiddleを作成したヘッダは、コンテンツの垂直スクロールと固定されています。指定された列サイズはありません（フィドルの中央のディバイダを左右にドラッグするとサイズが変更されます）、テーブルはページ幅の97％に設定されたdivで囲まれています。あなたが使用するASP.Netを言えば

$(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>

：;）ASP.Netのようにレンダリングされると、ページングがオンになっている

ここでは、コードスニペットと同じ例です静的Id：<asp:GridView ID="GridView_Vehicle" ClientIDMode="static" ...あなたのテーブルを参照できるようにする必要があります：$('#GridView_Vehicle').DataTable({ ... });

出典

2017-03-31 10:02:58

はここで行の適度な数のグリッドのためのソリューションです（とあなたがそれ以上のものを持っている場合は、あなたの代わりに、スクロールの小さいサイズのページングを使用する場合があります）：

を持つ2つのGridViewの要素を作成します。第2のものがShowHeader = "false"を有することを除いて、同じ仕様およびデータソース。最初のスタイルを "style =" height：38px; overflow：hidden "のdivにします（ヘッダーに使用するフォントに基づいて高さを調整する必要があります）。 style = "max-height：400px; overflow：auto"（表示する行の数に基づいて高さを調整する）でdivを内側に配置します。どちらのテーブルも同じデータを使用するため、適切に整列し、2番目のテーブルはスクロール可能になります。並べ替えを有効にする場合は、サーバー上で共有データソースに対して行い、2番目のGridViewをUpdatePanel内に配置し、最初のAsyncPostBackTriggerを指すAsyncPostBackTriggerを指定します。例のコードは次のとおりです。

<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>

出典

2017-06-30 20:25:40 johnm

ガードビューのヘッダーをフリーズする方法[gridviewと列の幅が固定されていません]

答えて

関連する問題