`
nbkangta
  • 浏览: 431605 次
  • 性别: Icon_minigender_1
  • 来自: 宁波
社区版块
存档分类
最新评论

ExtJs tree的操作

    博客分类:
  • JS
阅读更多
var Tree = Ext.tree;
        var tree = null;
        Ext.onReady(function(){
            tree = new Tree.TreePanel({
            el:'tree-div',
            onlyLeafCheckable:false,
            rootVisible: true,
            autoScroll:true,
            animate:false,//是否动画
            enableDD:true,// 是否支持拖放
            containerScroll:true,
            lines:true, 
            checkModel:'cascade',
            loader:new Tree.TreeLoader({dataUrl:'../info/rss.do?method=getJsonArray',
                           baseAttrs: {uiProvider: Ext.tree.TreeCheckNodeUI}
            })
          });
        
    // set the root node
    var root = new Tree.AsyncTreeNode(
        {
        "text":"我的网摘",
        "id":"01",
        "allowDrag":false   //false表示不能被拖动
        
        }
    
    );


    
     //绑定节点加载之前事件
    tree.on('beforeload',function(node){   
        if(node.id!='01'){
              tree.loader.dataUrl = '../info/rss.do?method=getChildJsonArray&nodeid='+node.id;
          }
    }); 
    

    //绑定节点点击事件
    /**//*
    tree.on('click', function(node){
        if(node.id!='root'){
            alert(node.id);
            alert(node.text);
            alert(node.href);
        }
    });
    */
   

    

    //绑定节点拖动事件,找了很久树节点拖动的实现,终于在老外的帖子发现上了这个实现,拖动以后所需的信息已经捕获,与后台联动的函数 加上即可实现TREE的拖拽
   tree.on('nodedrop', 
      function(e){   
                           
         if(e.point=='append'){   
            alert('当前"【'+e.dropNode.text+'】"被放到目录"【'+e.target.text+'】"下!');   
            var resultUrl = "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=append";
            var resulthtml = XmlHttpHelper.transmit(false, "get", "text", resultUrl, null, null);
         }
         
         else if(e.point=='above'){   
            //alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"上面!');   
             var resultUrl = "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=above";
             var resulthtml = XmlHttpHelper.transmit(false, "get", "text", resultUrl, null, null);
         }else if(e.point=='below'){   
            //alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"下面!'); 
             var resultUrl = "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=below";
            var resulthtml = XmlHttpHelper.transmit(false, "get", "text", resultUrl, null, null);  
         } 
           
       } 
    );
    
    //绑定节点右键菜单功能
    
    tree.on('contextmenu',function(node,event){  
         // alert("node.id="+ node.id);
          event.preventDefault(); //这行是必须的
          rightClick.showAt(event.getXY());//取得鼠标点击坐标,展示菜单
          //alert(node.id);
          document.getElementById('rootid').value=node.id;
         }); 
         
         
     //定义右键菜单
    var rightClick = new Ext.menu.Menu({
        id :'rightClickCont',
        items : [{
            id:'rMenu1',
            text : '编辑',
            //增加菜单点击事件
            handler:function (node){
                 //alert(node.dropNode.id);
            }
        }, {
            id:'rMenu2',
            text : '删除'
        }, {
            id:'rMenu3',
            text : '菜单3'
        }]
     });


    tree.setRootNode(root);
    // render the tree
    tree.render();
    root.expand();
  });

 原帖地址:http://www.cnblogs.com/huazi4995/articles/1245150.html

分享到:
评论

相关推荐

    动态加载extjs tree

    ExtJS Tree是Ext JS库中的一个组件,用于创建和展示层次结构的数据,通常表现为树形结构。这个组件在Web应用程序中广泛使用,特别是在需要管理有层级关系的数据时,如文件系统、组织架构或者导航菜单等。动态加载是...

    extjs tree 异步加载树型

    ExtJS Tree 是一个基于 ExtJS 框架的组件,用于构建可交互的、层级结构的树形控件。在 Web 开发中,它经常被用来展示目录结构、组织架构或者复杂的分类数据。异步加载树型是 ExtJS Tree 的一个重要特性,允许只在...

    Extjs tree实例【源代码】

    本例旨在说明extjs的tree操作,后台操作很简陋。给入门同学一个简单指导。 本例,存在几个明显的bug,但不影响本意,见谅。 需要C#无bug版的同学,请留下邮箱。 最后:祝自己在13年,顺利完成所有计划!

    extjs tree示例

    总的来说,ExtJS Tree 示例展示了如何将动态数据与用户界面相结合,提供一个直观且功能丰富的树状导航系统,同时通过Access数据库支持对树结构的增删操作。通过深入理解和实践,你可以创建出适应各种业务需求的高效...

    ExtJs Tree

    通过ExtJs Tree,用户可以直观地展示数据之间的层级关系,并支持多种交互操作,如展开、折叠节点等。 ### 特性与功能 #### 树形面板(Treepanel) - **自动滚动**:通过`autoScroll`属性设置为`true`,确保当内容...

    Extjs Tree + JSON + Struts2 示例源代码

    ExtJS Tree + JSON + Struts2 示例源代码是结合了三种技术来实现一个动态的、交互式的树形数据展示的应用。这个示例中,ExtJS用于前端UI的构建,JSON作为数据交换格式,而Struts2则作为后端MVC框架处理请求和返回...

    ExtJS Tree教程及例子代码

    ExtJS Tree组件提供了丰富的功能和自定义选项,包括节点的拖放操作、异步加载、复选框、分页以及各种事件监听等。 本教程旨在帮助开发者深入理解和熟练运用ExtJS Tree。通过eclipse项目导入提供的源码,你可以看到...

    extjs tree

    ExtJS Tree是基于ExtJS框架实现的一种数据结构展示方式,它主要用于展示层级关系的数据,例如组织结构、文件系统等。ExtJS是一个强大的JavaScript库,专为构建富客户端Web应用程序而设计,提供了丰富的组件化功能和...

    带复选框的 ExtJs tree

    在给定的文件中,我们关注的是“带复选框的ExtJS tree”这一主题,这涉及到ExtJS框架下的树形组件(TreePanel)如何与复选框结合,为用户提供更为灵活的数据选择和管理方式。 ### 标题解析:“带复选框的ExtJS tree...

    extjs tree 学习资料

    ExtJS Tree 是一个功能强大的JavaScript组件,用于在Web应用程序中创建和展示层次结构的数据,它在ExtJS框架中扮演着重要角色。这个压缩包“extjs tree 学习资料”显然是为那些希望深入理解并掌握ExtJS Tree组件的...

    Extjs的tree

    ExtJS的Tree组件是Sencha ExtJS框架中的一个重要部分,用于构建可交互的树形结构数据展示。在ExtJS中,TreePanel是用来显示和操作树形数据的主要组件,它可以用于组织层次化的信息,如文件系统、组织架构或者分类...

    extjs-tree.zip_extjs tree

    ExtJS Tree是一个强大的JavaScript库,专门用于创建交互式的树形结构。这个"extjs-tree.zip"文件包含了使用Java编写的ExtJS异步树形控件的示例代码,旨在帮助开发者快速理解和应用这一功能。ExtJS是Sencha公司开发的...

    ExtJs4 Checkbox tree

    ExtJs4 Checkbox Tree是基于ExtJs 4框架实现的一种特殊树形组件,它在传统的树形结构基础上增加了复选框功能。这种组件常用于需要用户多选树形数据的场景,比如权限设置、目录选择等。下面将详细介绍ExtJs4 Checkbox...

    Extjs Tree + JSON + Struts2

    在这个项目中,`index.html` 是主页面,`tree.js` 包含了 ExtJS 的树组件相关的 JavaScript 代码,`menu.jsp` 可能是用于展示或操作树形菜单的 JSP 页面,而 `WEB-INF` 和 `META-INF` 文件夹则是标准的 Java Web ...

    extjs ajax tree(js动态树,无需递归)

    ExtJS AJAX Tree是一种基于JavaScript的动态树形结构,它利用AJAX技术来异步加载节点数据,无需在服务器端生成完整的树结构。这种方式可以显著提高页面加载速度,尤其是在处理大量数据时。ExtJS是一个功能丰富的...

    extjs tree2

    ExtJS Tree2是一个基于ExtJS库的树形控件,用于构建交互式的、层次结构的数据显示和管理。这篇博客文章可能详细介绍了如何使用和自定义这个控件,但遗憾的是,由于没有提供实际的博客内容,我将根据ExtJS Tree的一般...

    struts2与extjs tree的完美结合

    在这个“struts2与extjs tree的完美结合”的示例中,开发者利用了Struts2的Annotation特性来简化配置,以及Struts2JSON插件来处理JSON数据,从而实现在服务器端动态生成和返回Tree节点。Annotation使得开发者能够在...

    Extjs tree and Grid(Buffer Grid,Progress Grid)

    在"Extjs tree and Grid(Buffer Grid,Progress Grid)"这个主题中,我们将深入探讨这两个核心组件以及它们的特定变体——缓冲网格(Buffer Grid)和进度网格(Progress Grid)。 1. **ExtJS Tree** - 树形控件...

    ExtJs_TreeDemo

    树形菜单(Tree)是ExtJs中的一个重要组件,它允许用户以层级结构展示数据,广泛应用于文件系统、组织结构或者导航菜单等场景。"ExtJs_TreeDemo"是一个示例,展示了如何在ExtJs中实现树形菜单的功能。 在ExtJs中,...

    extjs tree + json+struts2示例源代码

    ExtJS Tree + JSON + Struts2 示例源代码详解 在Web开发中,构建交互式的用户界面是关键。ExtJS是一个强大的JavaScript库,尤其擅长创建桌面级的Web应用。本示例将详细介绍如何结合ExtJS的Tree组件、JSON数据格式...

Global site tag (gtag.js) - Google Analytics