在之前的一次项目开发学习过程中，我需要实现一个功能，就是点击导航栏的链接后左侧树形菜单自动生成对应的菜单项。当时这个问题困扰了我很长一段时间。


后来，在看了ExtJs官方的文档及Demo后一下恍然大悟。


我们来认真分析一下要实现这个功能就是让树形菜单整个刷新。


首先来看看官方的Demo里面是怎么写的：


后台Default.aspx.cs文件中的关键代码：


[DirectMethod]publicstringRefreshMenu(){Ext.Net.TreeNodeCollectionnodes=this.BuildTree(null);returnnodes.ToJson();}


前台Default.aspx文件中的关键Javascript代码：


<scripttype="text/javascript">varrefreshTree=function(tree){Ext.net.DirectMethods.RefreshMenu({success:function(result){varnodes=eval(result);if(nodes.length>0){tree.initChildren(nodes);}else{tree.getRootNode().removeChildren();}}});}</script>


从上面的几行代码可以看出，使用tree.initChildren()方法就可以达到刷新整棵树的目的。


因此，我们来依着葫芦画瓢。


首先，后台Main.aspx.cs文件关键代码如下（这里省略了构建树形菜单的代码）：


[DirectMethod]publicstringRefreshMenu(stringsid){Ext.Net.TreeNodeCollectionnodes=this.BuildTree(sid);returnnodes.ToJson();}


其次，前台Main.aspx文件中Javascript代码如下：


$(document).ready(function(){//点击二级菜单项的事件$("ul#topnavliula").click(function(){vartree=Ext.getCmp("TreePanel1");//获取树形菜单组件varsid=$(this)[0].id;refreshTree(tree,sid);//刷新树形菜单//消除默认行为returnfalse;});});//刷新树形菜单varrefreshTree=function(tree,sid){Ext.net.DirectMethods.RefreshMenu(sid,{success:function(result){varnodes=eval(result);//alert(result);if(nodes.length>0){tree.initChildren(nodes);//Ext.Msg.alert('提示','成功');}else{tree.getRootNode().removeChildren();//Ext.Msg.alert('警告','失败');}}});}


前台Main.aspx页面对应的html代码


<ulid="topnav"><li>常用功能</li><liid="menu1"onmouseover=""><ahref="#">工单、绩效</a><ulid="submenu1"class="left_side"><li><asp:Repeaterrunat="server"ID="rp_gdjx"DataSourceID="SqlDataSource1"><ItemTemplate><aid="<%#Eval("GNDM")%>"href=''><%#Eval("GNMC")%></a></ItemTemplate></asp:Repeater><asp:SqlDataSourceID="SqlDataSource1"runat="server"ConnectionString="<%$ConnectionStrings:YXGLXTConnectionString%>"SelectCommand="select*fromtblXTGNwhereGNDMin(01,02,03)"></asp:SqlDataSource></li></ul></li></ul>


最后实现的效果如图：