Question

我试图在我的页面中使用可滚动的GridView，但问题是Header和字段或单元格内容未对齐。换句话说，我的单元格或字段未与标题对齐;它们向右移动了一点点。在应用JQuery Scrollable函数之前，所有内容都完美对齐，现在我不知道如何解决这个问题。有人可以帮忙吗？谢谢这是我的代码

<script src="../Scripts/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="../Scripts/ScrollableGridViewPlugin_ASP.NetAJAXmin.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#<%=GV_Detail.ClientID %>').Scrollable({
            ScrollHeight: 300,
            IsInUpdatePanel: true
        });
    });
</script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
 <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
<div>
<asp:UpdatePanel ID="up" runat="server">
    <ContentTemplate>
    <asp:GridView ID="GV_Detail" runat="server" 
        AllowSorting="True" AutoGenerateColumns="False" BackColor="White" 
        BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" 
        DataSourceID="GV_Detail_DS">
        <Columns>
                <asp:BoundField DataField="ContactName" HeaderText="Contact Name" />
                <asp:BoundField DataField="City" HeaderText="City" />
                <asp:BoundField DataField="Country" HeaderText="Country" />
                </Columns> 
        <FooterStyle BackColor="White" ForeColor="#000066" />
        <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
        <RowStyle ForeColor="#000066" />
        <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
        <SortedAscendingCellStyle BackColor="#F1F1F1" />
        <SortedAscendingHeaderStyle BackColor="#007DBB" />
        <SortedDescendingCellStyle BackColor="#CAC9C9" />
        <SortedDescendingHeaderStyle BackColor="#00547E" />
    </asp:GridView>
    <asp:SqlDataSource ID="GV_Detail_DS" runat="server" 
        ConnectionString="<%$ ConnectionStrings:MyConnectionString %>" 
        SelectCommand="SELECT contactname, city, country from my table">
    </asp:SqlDataSource>

     </ContentTemplate>
</asp:UpdatePanel>
</div>

Answer 1

也许你可以尝试我的解决方案。我测试了所有细胞对齐。

GridViewScroll with jQuery

enter image description here

Answer 2

要将网格与标题对齐，您需要删除手机垫，然后尝试一下。

或者您也可以使用上面的插件。它大部分时间都有效，但在某些情况下会导致双回发。

ASP.Net中带有固定标头的JQuery Scrollable GridView

2 个答案: