ExtJs Treepanel刷新树形菜单

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

后来,在看了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

ExtJs Treepanel刷新树形菜单的相关文章

Unity UGUI自定义树形菜单(TreeView)

先上几张效果图:          如果你需要的也是这种效果,那你就来对地方了! 目前,我们这个树形菜单展现出来的功能如下: 1.可以动态配置数据源: 2.点击每个元素的上下文菜单按钮(也就是图中的三角形按钮),可以收缩或展开它的子元素: 3.可以单独判断某一元素的复选框是否被勾选,或者直接获取当前树形菜单中所有被勾选的元素: 4.树形菜单统一控制其下所有子元素按钮的事件分发: 5.可自动调节的滚动视野边缘,根据当前可见的子元素数量进行横向以及纵向的伸缩: 一.首先,我们先制作子元素的模板(Te

[JavaScript]cookie实现刷新不变化树形菜单

通过设置cookie来保存树形菜单的状态,在页面加载时重新读取cookie来设置菜单. 菜单的HTML结构: 1 <div class="treemenu"> 2 <ul> 3 <li> 4 <a href="#" id="treemenu_a_1">一级菜单一</a> 5 <div class="submenu" id="submenu_1"

实用的树形菜单控件tree

 jQuery plugin: Treeview 这个插件能够把无序列表转换成可展开与收缩的Tree. jQuery plugin: Treeview  jQuery  jstree jsTree是一个基于jQuery的Tree控件.支持XML,JSON,Html三种数据源.提供创建,重命名,移动,删除,拖\放节点操作.可以自己自定义创建,删除,嵌套,重命名,选择节点的规则.在这些操作上可以添加多种监听事件.  jstree  jQuery UI Widgets  FileTreePanel F

【转】html树形菜单控件

Query plugin: Treeview 这个插件能够把无序列表转换成可展开与收缩的Tree. 主页:http://bassistance.de/jQuery-plugins/jquery-plugin-treeview/ 下载:http://jquery.bassistance.de/treeview/jquery.treeview.zip 示例:http://jquery.bassistance.de/treeview/demo/ jstree jsTree是一个基于jQuery的Tre

ExtJS4.2 根据数据库记录构建树形菜单

背景:最近用ExtJS4.2做一个系统,需要在前端展示资源菜单,为树形结构,该树形结构是从数据库动态加载的. ExtJS的树形结构大致有两种情况: 1.静态树形结构,此处不多说,看API就能简单明白: 2.动态加载,ExtJS的特性是根据父节点ID来查询子节点,从而动态更新树形菜单,这里有一个缺陷,或许是我孤陋寡闻不知道,那就是无法根据数据库节点信息自动构建成为一棵树,记得zTree插件就有这个功能. 那么,我希望能够根据数据库树节点信息自动的构建成一棵树,就需要自己去写个小算法在后台拼接成Ex

今天在做后台管理系统的无刷新左侧菜单,遇到两个难题:(CTE递归查询、ashx+Session[])

今天在做后台管理系统的无刷新左侧菜单,遇到两个难题: 1.怎么将数据表中的菜单项按树形结构进行层次性的查询?群里有人给我指点说用CTE递归查询,我还没搞明白. 2.要做左侧导航栏的根据用户权限的无刷新加载时,要用到AJAX,那么就要在ashx一般处理程序中取得Session["UserID"]的值,但是ashx中是不能用Session的,之后找到一篇文章,指出:若要在ashx中使用Session和Request需要引入一个接口. 在ashx文件中使用Session和QueryStrin

关于采用css样式将多余的文字隐藏,以及实现树形菜单

前不久根据项目需要,需要写个页面,在页面中需要动态的实现一个树形的菜单,经过问度娘,选择使用一个treeTable的js插件.http://zhanchaojiang.com/demo/demo/treeTable.html这是对该插件的介绍地址.在这个插件中有如下几个树形:theme:default或者是vsStyle,默认为default,差别应该在样式上,default是加减号,vsStyle是三角.expandLevel:默认展开的层数,默认值为1.也就是刷新该页面时树状图展开的层次.c

利用多叉树实现Ext JS中的无限级树形菜单(一种构建多级有序树形结构JSON的方法)

一.问题研究的背景和意义 目前在Web应用程序开发领域,Ext JS框架已经逐渐被广泛使用,它是富客户端开发中出类拔萃的框架之一.在Ext的UI控件中,树形控件无疑是最为常用的控件之一,它用来实现树形结构的菜单.TreeNode用来实现静态的树形菜单,AsyncTreeNode用来实现动态的异步加载树形菜单,后者最为常用,它通过接收服务器端返回来的JSON格式的数据,动态生成树形菜单节点.动态生成树有两种思路:一种是一次性生成全部树节点,另一种是逐级加载树节点(利用AJAX,每次点击节点时查询下

ExtJs treepanel和TabPanel配合使用

tree.js Ext.onReady(function() { Ext.lib.Ajax.defaultPostHeader += '; charset=utf-8'; var center = new Ext.TabPanel( { id : 'tab_main', region : 'center', frame : false, items : [ { id : 'welcome', title : '首页', html : "<iframe src='welcome.jsp' w