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  阅读(844)  评论(0)    收藏  举报