`
jeelee
  • 浏览: 637720 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

ExtJs tree的操作

EXT 
阅读更多
1.var Tree = Ext.tree;  
2.        var tree = null;  
3.        Ext.onReady(function(){  
4.            tree = new Tree.TreePanel({  
5.            el:'tree-div',  
6.            onlyLeafCheckable:false,  
7.            rootVisible: true,  
8.            autoScroll:true,  
9.            animate:false,//是否动画  
10.            enableDD:true,// 是否支持拖放  
11.            containerScroll:true,  
12.            lines:true,   
13.            checkModel:'cascade',  
14.            loader:new Tree.TreeLoader({dataUrl:'../info/rss.do?method=getJsonArray',  
15.                           baseAttrs: {uiProvider: Ext.tree.TreeCheckNodeUI}  
16.            })  
17.          });  
18.          
19.    // set the root node  
20.    var root = new Tree.AsyncTreeNode(  
21.        {  
22.        "text":"我的网摘",  
23.        "id":"01",  
24.        "allowDrag":false   //false表示不能被拖动  
25.          
26.        }  
27.      
28.    );  
29. 
30. 
31.      
32.     //绑定节点加载之前事件  
33.    tree.on('beforeload',function(node){     
34.        if(node.id!='01'){  
35.              tree.loader.dataUrl = '../info/rss.do?method=getChildJsonArray&nodeid='+node.id;  
36.          }  
37.    });   
38.      
39. 
40.    //绑定节点点击事件  
41.    /**//* 
42.    tree.on('click', function(node){ 
43.        if(node.id!='root'){ 
44.            alert(node.id); 
45.            alert(node.text); 
46.            alert(node.href); 
47.        } 
48.    }); 
49.    */ 
50.     
51. 
52.      
53. 
54.    //绑定节点拖动事件,找了很久树节点拖动的实现,终于在老外的帖子发现上了这个实现,拖动以后所需的信息已经捕获,与后台联动的函数 加上即可实现TREE的拖拽  
55.   tree.on('nodedrop',   
56.      function(e){     
57.                             
58.         if(e.point=='append'){     
59.            alert('当前"【'+e.dropNode.text+'】"被放到目录"【'+e.target.text+'】"下!');     
60.            var resultUrl = "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=append";  
61.            var resulthtml = XmlHttpHelper.transmit(false, "get", "text", resultUrl, null, null);  
62.         }  
63.           
64.         else if(e.point=='above'){     
65.            //alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"上面!');     
66.             var resultUrl = "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=above";  
67.             var resulthtml = XmlHttpHelper.transmit(false, "get", "text", resultUrl, null, null);  
68.         }else if(e.point=='below'){     
69.            //alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"下面!');   
70.             var resultUrl = "../info/rss.do?method=treeNodeTuoDong&currenRootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=below";  
71.            var resulthtml = XmlHttpHelper.transmit(false, "get", "text", resultUrl, null, null);    
72.         }   
73.             
74.       }   
75.    );  
76.      
77.    //绑定节点右键菜单功能  
78.      
79.    tree.on('contextmenu',function(node,event){    
80.         // alert("node.id="+ node.id);  
81.          event.preventDefault(); //这行是必须的  
82.          rightClick.showAt(event.getXY());//取得鼠标点击坐标,展示菜单  
83.          //alert(node.id);  
84.          document.getElementById('rootid').value=node.id;  
85.         });   
86.           
87.           
88.     //定义右键菜单  
89.    var rightClick = new Ext.menu.Menu({  
90.        id :'rightClickCont',  
91.        items : [{  
92.            id:'rMenu1',  
93.            text : '编辑',  
94.            //增加菜单点击事件  
95.            handler:function (node){  
96.                 //alert(node.dropNode.id);  
97.            }  
98.        }, {  
99.            id:'rMenu2',  
100.            text : '删除' 
101.        }, {  
102.            id:'rMenu3',  
103.            text : '菜单3' 
104.        }]  
105.     });  
106. 
107. 
108.    tree.setRootNode(root);  
109.    // render the tree  
110.    tree.render();  
111.    root.expand();  
112.  }); 
分享到:
评论

相关推荐

    动态加载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