ASP.NET TreeView阻止重复点击回发及滚动条保持
在做一个网站,左侧一个树形结构,右侧一个frame,点击树形结构,重定向frame。然后遇到几个问题问题:
- 重复点击treeview的节点,frame重新刷新为空白。如果使用NavigateUrl方式,SelectNode的样式又无法应用。
- 如果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,还请高人指点。