可滚动的 GridView 不适用于 ASP.Net 中的 UpdatePanel

Question

我有 jQuery 函数，它允许我的 gridview 滚动，但是当我添加更新面板时，滚动条消失了，结果只是填满了整个页面。当我添加一个更新面板的触发按钮时，这个问题就发生了。 这是我页面标题部分的内容：

<script src="Scripts/gridviewScroll.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function () {
        gridviewScroll();
    });
    function gridviewScroll() {
        $('#gvMain').gridviewScroll({
            width: 900,
            height: 500,
            arrowsize: 30,
            varrowtopimg: "Images/arrowvt.png",
            varrowbottomimg: "Images/arrowvb.png",
            harrowleftimg: "Images/arrowhl.png",
            harrowrightimg: "Images/arrowhr.png"
        });
    } 

这是我的标记：

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>

   <div> 


 <asp:GridView ID="gvMain" runat="server" Width="100%" AutoGenerateColumns="False" 
    ......
..........

</asp:GridView> 

    </div>    
     </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnClick" />
        </Triggers>
    </asp:UpdatePanel>

Answer 1

那是因为您正在通过 ajax 更新网格，并且当您这样做时，DOM 会被更改，并且您所做的修改会丢失。您需要在每次部分更新后调用 gridviewScroll() 方法来维护更新前已应用的样式。为此，请尝试以下操作：

$(document).ready(function () {
    gridviewScroll();
});

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(evt, args) {
    gridviewScroll();
});

这样，每次部分更新后，样式都会重新应用，滚动也会如此。