ASP.NET TreeView阻止重复点击回发及滚动条保持

  在做一个网站,左侧一个树形结构,右侧一个frame,点击树形结构,重定向frame。然后遇到几个问题问题:

  1. 重复点击treeview的节点,frame重新刷新为空白。如果使用NavigateUrl方式,SelectNode的样式又无法应用。
  2. 如果treeview结构很高,点击节点,页面重新刷新后,滚动条回到了顶端。

  所有的节点点击都是通过_doPostBack函数来提交的:

function __doPostBack(eventTarget, eventArgument) {
     if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
         theForm.__EVENTTARGET.value = eventTarget;
         theForm.__EVENTARGUMENT.value = eventArgument;
         theForm.submit();
     }
 }

  发现在执行submit之前,会先执行form的onsubmit(),这就有了解决办法:

  a.对于问题1:我们将上一次点击的节点ID保存起来,下一次点击时进行比较,如果相同就阻止form的submit。我们通过设置HoverNode和SelectedNodeStyle的CSS,通过JQuery来查找到之前点击和现在点击的节点。
  b.对于问题2:我们将滚动条的位置记录起来,下一次页面刷型,再设置滚动条的位置(我的treeview在一个DIV中)。

        $(function () {
      //设置滚动条位置
            if ($("#lastScroll").val() != "0") 
                $(".div_outree").scrollTop($("#lastScroll").val()); 
        });

 

        function onSubmit() {
      //获得当前滚动条的高度
            $("#lastScroll").val($(".div_outree").scrollTop());

      //比较点击的节点
            var hoverNodeId = $("a.HoverNode").attr("id");
            if (hoverNodeId == $("#hdnLastSelectNode").val()) {
                return false;
            }
            else
                $("#hdnLastSelectNode").val($("a.HoverNode").attr("id"));
            return true;
        }

  

  不需要修改后台代码。前台代码:

<body>
    <form id="form1" runat="server" onsubmit = "return onSubmit()">
    <div class="div_left">
        <div class="div_sercher">
            搜索区域
            <asp:HiddenField ID="hdnLastSelectNode" runat="server" />
            <asp:HiddenField ID="lastScroll" runat="server" />
        </div>
        <div class="div_outree">
            <asp:TreeView ID="OuTree" runat="server"  
                ontreenodepopulate="OuTree_TreeNodePopulate" 
                onselectednodechanged="OuTree_SelectedNodeChanged" >
                <NodeStyle  CssClass ="Node"/>
                <SelectedNodeStyle CssClass="selectNode" />
                <HoverNodeStyle CssClass = "HoverNode"/>
            </asp:TreeView>
        </div>
    </div>
    <div class="div_right" id="div_right">
        <iframe src="" frameborder="0" framespaceing= "0" scrolling="auto" marginheight="0" marginwidth="0" name="mmcRight" id="mmcRight"  onload="iframeOnload()"></iframe>
    </div>
    </form>

    <script type="text/javascript">
        window.onresize = function () { iframeOnload("mmc winonresize"); };

    </script>

  小弟初学.NET ASPX,还请高人指点。

 

posted @ 2013-02-28 16:07  smileruner  阅读(768)  评论(0编辑  收藏  举报