在之前的一次项目开发学习过程中,我需要实现一个功能,就是点击导航栏的链接后左侧树形菜单自动生成对应的菜单项。当时这个问题困扰了我很长一段时间。
后来,在看了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" οnmοuseοver="" 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>
最后实现的效果如图:
转载于:https://blog.51cto.com/jccto/1785744