在之前的一次项目开发学习过程中,我需要实现一个功能,就是点击导航栏的链接后左侧树形菜单自动生成对应的菜单项。当时这个问题困扰了我很长一段时间。
后来,在看了ExtJs官方的文档及Demo后一下恍然大悟。
我们来认真分析一下要实现这个功能就是让树形菜单整个刷新。
首先来看看官方的Demo里面是怎么写的:
后台Default.aspx.cs文件中的关键代码:
[DirectMethod] public string RefreshMenu() { Ext.Net.TreeNodeCollection nodes = this.BuildTree(null); return nodes.ToJson(); }
前台Default.aspx文件中的关键Javascript代码:
<script type="text/javascript"> var refreshTree = function (tree) { Ext.net.DirectMethods.RefreshMenu({ success : function (result) { var nodes = eval(result); if(nodes.length > 0){ tree.initChildren(nodes); } else{ tree.getRootNode().removeChildren(); } } }); } </script>
从上面的几行代码可以看出,使用tree.initChildren()方法就可以达到刷新整棵树的目的。
因此,我们来依着葫芦画瓢。
首先,后台Main.aspx.cs文件关键代码如下(这里省略了构建树形菜单的代码):
[DirectMethod] public string RefreshMenu(string sid) { Ext.Net.TreeNodeCollection nodes = this.BuildTree(sid); return nodes.ToJson(); }
其次,前台Main.aspx文件中Javascript代码如下:
$(document).ready(function () { //点击二级菜单项的事件 $("ul#topnav li ul a").click(function () { var tree = Ext.getCmp("TreePanel1"); //获取树形菜单组件 var sid = $(this)[0].id; refreshTree(tree, sid); //刷新树形菜单 //消除默认行为 return false; }); }); //刷新树形菜单 var refreshTree = function (tree, sid) { Ext.net.DirectMethods.RefreshMenu(sid, { success: function (result) { var nodes = eval(result); //alert(result); if (nodes.length > 0) { tree.initChildren(nodes); //Ext.Msg.alert(‘提示‘, ‘成功‘); } else { tree.getRootNode().removeChildren(); //Ext.Msg.alert(‘警告‘, ‘失败‘); } } }); }
前台Main.aspx页面对应的html代码
<ul id="topnav" style="float:right; margin-right:90px;"> <li style="width:100px; text-align:center">常用功能</li> <li id="menu1" onmouseover="" style="width:100px; text-align:center"> <a href="#">工单、绩效</a> <ul id="submenu1" class="left_side"> <li> <asp:Repeater runat="server" ID="rp_gdjx" DataSourceID="SqlDataSource1"> <ItemTemplate> <a id="<%#Eval("GNDM") %>" href=‘‘><%#Eval("GNMC")%></a> </ItemTemplate> </asp:Repeater> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:YXGLXTConnectionString %>" SelectCommand="select * from tblXTGN where GNDM in(01,02,03)"> </asp:SqlDataSource> </li> </ul> </li> </ul>
最后实现的效果如图:
时间: 2024-11-01 00:36:00