0

令人困惑的标题，但我可以说的最好的方式。

基本上我目前正在使用一个带有溢出的 div：auto 包含不同的 GridViews。GridViews 通过使用 MultiView 交换，每个单独的视图包含一个 GridView。

我希望能够存储每个视图的滚动位置，以便我可以根据要切换到的视图设置 div 的滚动位置。

这是我的页面的设置方式。

<div id="scrollingDiv" style="height:100%; overflow:auto;">
  <div id="gridWrap">

  <asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline">
  <ContentTemplate>
    <asp:MultiView ID="MultiView1" runat="server">
      <asp:View ID="view1" runat="server">
        <asp:GridView ID="gridView1" runat="server">
        </asp:GridView>
      </asp:View>

      <asp:View ID="view2" runat="server">
        <asp:GridView ID="gridView2" runat="server">
        </asp:GridView>
      </asp:View>
    </asp:Multiview>
  </ContentTemplate>
  </asp:UpdatePanel>

  </div>
</div>

所以 scrollingDiv 将包含所有的 View 并且会为每一个 GridView 滚动。

要在视图之间切换，我有一个连接到

protected void DropDownList_SelectedIndexChanged(object sender, EventArgs e)
{
    switch (DownList.SelectedItem.Value)
    {

        case "view1":
            MultiView1.SetActiveView(view1);
            break;
        case "view2":
            MultiView1.SetActiveView(view2);
            break;
    }
}

我一直在环顾四周，找不到特定于我的情况的东西。我希望能够只使用一个溢出 div，但会理解是否必须为每个视图制作一个单独的溢出 div。

任何帮助都会很棒，谢谢。

4

1 回答 1

1

jQuery 和一些隐藏字段可以提供帮助。尝试这个...

    <asp:Hiddenfield ID="hdnCurrentView" runat="server"/>
    <asp:Hiddenfield ID="hdnMultiView1Top" runat="server"/>
    <asp:Hiddenfield ID="hdnMultiView2Top" runat="server"/>

在后端，即在您的 CS 文件中，在隐藏字段中设置当前视图...

    protected void DropDownList_SelectedIndexChanged(object sender, EventArgs e)
    {
        switch (DownList.SelectedItem.Value)
        {
            case "view1":
                MultiView1.SetActiveView(view1);
                hdnCurrentView.Value = "View1";
                break;
            case "view2":
                MultiView1.SetActiveView(view2);
                hdnCurrentView.Value = "View2";
                break;
        }
    }

然后在你的 jQuery 就绪函数中，

    $().ready(function() {

        //for storing scroll position of each view in respective hiddenfields
        $(window).scroll(function () {
          if ($("#hdnCurrentView").val() == "View1") {
             $("#hdnMultiView1Top").val($(window).scrollTop());
          }
          else if ($("#hdnCurrentView").val() == "View2") {
             $("#hdnMultiView2Top").val($(window).scrollTop());
          }
        });

        //for restoring scroll position on page load i.e., ready function in jQuery 
        if ($("#hdnCurrentView").val() == "View1") {
           $(window).scrollTop($("#hdnMultiView1Top").val());
        }
        else if ($("#hdnCurrentView").val() == "View2") {
           $(window).scrollTop($("#hdnMultiView2Top").val());
        }

    });

这将保持每个多视图的垂直滚动位置。如果您也想保持水平滚动位置，请为每个视图设置隐藏字段并使用下面给出的 jQuery 函数。留给你作为练习...

    $(window).scrollLeft(value);

快乐编码……；）

于 2012-11-21T04:50:45.943 回答