0

メイングリッドビュー内にネストされた垂直および水平スクロールを持つグリッドビューがあります。ネストされたグリッドビューに水平および垂直スクロールを実装しました。水平および垂直スクロール中に、このネストされたグリッドビューのヘッダーを修正する必要があります。どうすればこれを行うことができますか?

    <asp:GridView ID="GridProjects" runat="server" AutoGenerateColumns="False"  Width="100%" OnRowDataBound="GridProjects_RowDataBound"  ShowFooter="true"   GridLines="None"  >                           
      <FooterStyle CssClass="grd_footer_bg grd_row_left" />
      <RowStyle CssClass=" grd_odd_row grd_row_left"  Wrap="false" />
      <HeaderStyle CssClass="grd_hdr_bg grd_row_left" Wrap="false"  Font-Bold="True"/>
      <AlternatingRowStyle CssClass="grd_evn_row grd_row_left" Wrap="false"/>  
      <Columns>
       <asp:TemplateField HeaderStyle-CssClass="padding" ItemStyle-Width="10px"        HeaderStyle-HorizontalAlign="Left" HeaderText="Project Name">
            <ItemTemplate > 
              <table >
               <tr>
                <td>
                <a href="javascript:switchViews('div<%# Eval("ProjectName") %>',   'one','GridProjects_GridResources_3','400', '950' , '40' ,'true');"><img id="imgdiv<%# Eval("ProjectName") %>" alt="Click to show/hide Lesson Lists" border="0"
src="images/expand_button_white.jpg"  /></a>
&nbsp;&nbsp;&nbsp;  
</td> 
<td>    <asp:Label ID="lblProjName" runat="server"  Text='<%# Eval("ProjectName") %>'></asp:Label> </td>
                    </tr>
                    </table>
                      </ItemTemplate>      
                </asp:TemplateField>
     <asp:TemplateField>
                    <ItemTemplate>
                            <tr>
                                                <td colspan="3">
                                                <div style="overflow: hidden;" id="DivHeaderRow">
                                                </div>

                                                   <div id="div<%# Eval("ProjectName") %>" onscroll="OnScrollDiv(this)" style="display: none; overflow:auto; position:relative; left: 25px;">                                               
                                                     <asp:Panel ID="pnlgrid" runat="server" Width="1309px" ScrollBars="Horizontal">
                                                        <asp:GridView ID="GridResources" runat="server" OnRowCreated="rowcreate" OnRowDataBound="GridResources_RowDataBound"   CssClass="grid" Width="900px" GridLines="Vertical"  
                                                  ShowFooter="true" AutoGenerateColumns="false" >
                                                             <FooterStyle CssClass="grd_footer_bg grd_row_left" />
                                    <RowStyle CssClass="grd_odd_row grd_row_left" Wrap="False" />
                                    <EditRowStyle BackColor="#999999" />
                                    <SelectedRowStyle CssClass="grd_higlight_row grd_row_left" />
                                    <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                                    <HeaderStyle CssClass="grd_hdr_bg grd_row_left fixedHeader"  Font-Bold="True"  HorizontalAlign="Left"
                                        Wrap="False" />
                                    <AlternatingRowStyle CssClass="grd_evn_row grd_row_left" Wrap="False" />
                                                            <Columns>
                                                            <%-- <asp:TemplateField>
                                        <ItemTemplate>
                                            <a href="javascript:switchViews('div<%# Eval("ResourceID") %>', 'one');">
                                                <img id="imgdiv<%# Eval("ResourceID") %>" alt="Click to show/hide Lesson Lists" border="0"
                                                    src="images/expand_button_white.jpg" /></a>
                                        </ItemTemplate>
                                    </asp:TemplateField>
    <asp:TemplateField HeaderText="Vacation/Comp Off">
                                                            <ItemTemplate>
                                                            <asp:TextBox ID="txtvacatcoff"  MaxLength="10" Text='<%# Eval("ReasonVaction") %>' onkeypress="return AllowNumericOnly(this)" runat="server"></asp:TextBox>
                                                            </ItemTemplate>
                                                            </asp:TemplateField>
                                                             <asp:TemplateField HeaderText="In Between Assignment">
                                                            <ItemTemplate>
                                                            <asp:TextBox ID="txtinbassign" MaxLength="10" Text='<%# Eval("ReasonInBtnAssignments") %>' onkeypress="return AllowNumericOnly(this)" runat="server"></asp:TextBox>
                                                            </ItemTemplate>
                                                            </asp:TemplateField>
                                                             <asp:TemplateField HeaderText="Internal Project">
                                                            <ItemTemplate>
                                                            <asp:TextBox ID="txtintproj" MaxLength="10" Text='<%# Eval("ReasonInternalProjects") %>' onkeypress="return AllowNumericOnly(this)" runat="server"></asp:TextBox>
                                                            </ItemTemplate>
                                                            </asp:TemplateField>
                                                             <asp:TemplateField HeaderText="Training">
                                                            <ItemTemplate>
                                                            <asp:TextBox ID="txttraining" MaxLength="10" Width="80px" Text='<%# Eval("ReasonTraining") %>' onkeypress="return AllowNumericOnly(this)" runat="server"></asp:TextBox>
                                                            </ItemTemplate>
                                                            </asp:TemplateField>
                                            <%--<asp:BoundField DataField="RevenueForecast" HeaderText="Revenue Forecast" />--%>
                                              <asp:TemplateField HeaderText="Revenue Forecast">
                                                            <ItemTemplate>
                                                            <asp:Label ID="lblRevenueForecast" Width="80px" Text='<%# Eval("RevenueForecast") %>' runat="server"></asp:Label>
                                                            </ItemTemplate>
                                                              <FooterTemplate>
                                                              <asp:Label ID="lblRevenueTotal" runat="server"></asp:Label>
                                                             </FooterTemplate>
                                             </asp:TemplateField>
                                             <asp:TemplateField HeaderText="Comments">
                                                            <ItemTemplate>
                                                            <asp:TextBox ID="txtComment" MaxLength="300" Text='<%# Eval("Comment") %>' runat="server"></asp:TextBox>
                                                            </ItemTemplate>
                                                            </asp:TemplateField>
                                    </Columns>
                                       </asp:GridView>
                                       </asp:Panel>
                                         </div>
                                         <div id="DivFooterRow" style="overflow:hidden">
                                         </div>
                                        </td>
                                       </tr>

                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
4

1 に答える 1

0

jQuery プラグインtableScrollを使用して、(GridView サーバー コントロールによってレンダリングされた) html テーブルに固定ヘッダーを設定することができました。

それを試すには、デモを見て、GridView によってレンダリングされたテーブルのクライアント側 ID を見つけます (ClientIdMode="static"クライアント側 ID がサーバー側 ID と同じになるように GridView に設定することをお勧めします)。次に、次のようなものを呼び出すことができます。

$('#GridProjects').tableScroll({height:400});

js ファイル jQuery および tableScroll へのスクリプト参照と、tableScroll CSS ファイルへのリンクがあると仮定します。

を設定したくない場合はClientIDMode="static"、次のように tableScroll を設定できます。

$('#<%= GridProjects.ClientID %>').tableScroll({height:400});
于 2012-08-08T12:38:12.273 に答える