如何使 Gridview 中的 Header 静态滚动？答案

【问题标题】：How to make the Header static in Gridview scroll?如何使 Gridview 中的 Header 静态滚动？
【发布时间】：2013-05-18 12:36:33
【问题描述】：

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

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

还有办法吗？谢谢。

【问题讨论】：

简单的 2 步即可实现这一目标。参考这个链接：dailydotnettips.com/2010/12/20/…

标签： asp.net vb.net visual-studio-2008

【解决方案1】：

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

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

)

你可以从下面的url下载这个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>

【讨论】：