Question

这里我正在尝试制作一个可滚动的网格视图，我使用溢出来做，但问题是，我想让Header部分静态，只允许滚动内容，这是我的代码：

 <div class="BodyDiv" style="overflow: auto; height: 200px">
   <asp:UpdatePanel ID="UpdatePanel2" runat="server">
     <ContentTemplate>
         <table width="1024px">
             <tr>
                 <td align="center">
                     <table width="980px">
                         <tr>
                           <td>
                             <asp:Panel ID="PanelDGV" runat="server" Height="250" ScrollBars="None" Width="515">
                              <asp:GridView ID="DGV" runat="server" AutoGenerateColumns="False" GridLines="None" AllowPaging="true" PageSize="50" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt">
                                     <Columns>
                                  <asp:BoundField DataField="ProjectCode" HeaderText="Project Code" />
                                  <asp:BoundField DataField="ProjectName" HeaderText="Project Name" />
                                  <asp:ButtonField ButtonType="Image" ImageUrl="../Support/Image/Edit.png" ItemStyle-HorizontalAlign="Center"
                                                        CommandName="CmdSearch" HeaderText="Edit">
                                    <ItemStyle HorizontalAlign="Center"></ItemStyle>
                                    </asp:ButtonField>
                                                </Columns>
                                    <PagerStyle CssClass="pgr"></PagerStyle>
                                    <AlternatingRowStyle CssClass="alt"></AlternatingRowStyle>
                                     </asp:GridView>
                              </asp:Panel>
                           </td>
                        </tr>
                   </table>
               </td>
            </tr>
        </table>
     </ContentTemplate>
  </asp:UpdatePanel>
</div>

无论如何都有吗？谢谢。

Answer 1

<script src="../Scripts/ScrollableGridPlugin.js" type="text/javascript"></script>

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

）

您可以从以下网址下载此js文件

http://code.google.com/p/dev-acuaman/source/browse/trunk/PyproduceEstad%C3%ACstica/EstadisticaProduce/Scripts/ScrollableGridPlugin.js?r=79

<asp:GridView ID="Grd" runat="server" Width="100%" AutoGenerateColumns="false">
                        <Columns>
                            <asp:TemplateField HeaderText="Country">
                                <ItemTemplate>
                                    <asp:Label ID="lbl" runat="server" Text='<%# Eval("CountryName") %>'></asp:Label>
                                </ItemTemplate>
                                <ItemStyle HorizontalAlign="Left" />
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Enter Shipping Charge">
                                <ItemTemplate>
                                    <asp:TextBox ID="txt" runat="server" Text='<%# Eval("charge") %>'></asp:TextBox>
                                    <asp:CompareValidator ID="CompareValidator2" runat="server" ControlToValidate="txt"
                                        ValidationGroup="txt" SetFocusOnError="true" Operator="DataTypeCheck" Type="Double"
                                        ErrorMessage="Country Wise Shipping Charge must be number!">*</asp:CompareValidator>
                                </ItemTemplate>
                                <ItemStyle HorizontalAlign="Left" Width="160px" VerticalAlign="Middle" />
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Enter No Of Days">
                                <ItemTemplate>
                                    <asp:TextBox ID="txt1" runat="server" Text='<%# Eval("days") %>'></asp:TextBox>
                                    <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToValidate="txt"
                                        ValidationGroup="txt1" SetFocusOnError="true" Operator="DataTypeCheck" Type="Integer"
                                        ErrorMessage="No Of Days must be number!">*</asp:CompareValidator>
                                </ItemTemplate>
                                <ItemStyle HorizontalAlign="Left" Width="160px" VerticalAlign="Middle" />
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>

如何在Gridview滚动中使Header静态？

1 个答案: