温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

ExtJs Treepanel刷新树形菜单

发布时间:2020-07-11 23:44:11 阅读:1311 作者:hayuyyuq 栏目:开发技术
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

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

后来,在看了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, {
            successfunction (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" >
    <li  >常用功能</li>
    <li id="menu1" onmouseover=""  >
      <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>

最后实现的效果如图:

ExtJs Treepanel刷新树形菜单

ExtJs Treepanel刷新树形菜单

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×