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¤RootId="+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¤RootId="+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¤RootId="+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是Ext JS库中的一个组件,用于创建和展示层次结构的数据,通常表现为树形结构。这个组件在Web应用程序中广泛使用,特别是在需要管理有层级关系的数据时,如文件系统、组织架构或者导航菜单等。动态加载是...
ExtJS Tree 是一个基于 ExtJS 框架的组件,用于构建可交互的、层级结构的树形控件。在 Web 开发中,它经常被用来展示目录结构、组织架构或者复杂的分类数据。异步加载树型是 ExtJS Tree 的一个重要特性,允许只在...
本例旨在说明extjs的tree操作,后台操作很简陋。给入门同学一个简单指导。 本例,存在几个明显的bug,但不影响本意,见谅。 需要C#无bug版的同学,请留下邮箱。 最后:祝自己在13年,顺利完成所有计划!
总的来说,ExtJS Tree 示例展示了如何将动态数据与用户界面相结合,提供一个直观且功能丰富的树状导航系统,同时通过Access数据库支持对树结构的增删操作。通过深入理解和实践,你可以创建出适应各种业务需求的高效...
通过ExtJs Tree,用户可以直观地展示数据之间的层级关系,并支持多种交互操作,如展开、折叠节点等。 ### 特性与功能 #### 树形面板(Treepanel) - **自动滚动**:通过`autoScroll`属性设置为`true`,确保当内容...
ExtJS Tree + JSON + Struts2 示例源代码是结合了三种技术来实现一个动态的、交互式的树形数据展示的应用。这个示例中,ExtJS用于前端UI的构建,JSON作为数据交换格式,而Struts2则作为后端MVC框架处理请求和返回...
ExtJS Tree组件提供了丰富的功能和自定义选项,包括节点的拖放操作、异步加载、复选框、分页以及各种事件监听等。 本教程旨在帮助开发者深入理解和熟练运用ExtJS Tree。通过eclipse项目导入提供的源码,你可以看到...
ExtJS Tree是基于ExtJS框架实现的一种数据结构展示方式,它主要用于展示层级关系的数据,例如组织结构、文件系统等。ExtJS是一个强大的JavaScript库,专为构建富客户端Web应用程序而设计,提供了丰富的组件化功能和...
在给定的文件中,我们关注的是“带复选框的ExtJS tree”这一主题,这涉及到ExtJS框架下的树形组件(TreePanel)如何与复选框结合,为用户提供更为灵活的数据选择和管理方式。 ### 标题解析:“带复选框的ExtJS tree...
ExtJS Tree 是一个功能强大的JavaScript组件,用于在Web应用程序中创建和展示层次结构的数据,它在ExtJS框架中扮演着重要角色。这个压缩包“extjs tree 学习资料”显然是为那些希望深入理解并掌握ExtJS Tree组件的...
ExtJS的Tree组件是Sencha ExtJS框架中的一个重要部分,用于构建可交互的树形结构数据展示。在ExtJS中,TreePanel是用来显示和操作树形数据的主要组件,它可以用于组织层次化的信息,如文件系统、组织架构或者分类...
ExtJS Tree是一个强大的JavaScript库,专门用于创建交互式的树形结构。这个"extjs-tree.zip"文件包含了使用Java编写的ExtJS异步树形控件的示例代码,旨在帮助开发者快速理解和应用这一功能。ExtJS是Sencha公司开发的...
ExtJs4 Checkbox Tree是基于ExtJs 4框架实现的一种特殊树形组件,它在传统的树形结构基础上增加了复选框功能。这种组件常用于需要用户多选树形数据的场景,比如权限设置、目录选择等。下面将详细介绍ExtJs4 Checkbox...
在这个项目中,`index.html` 是主页面,`tree.js` 包含了 ExtJS 的树组件相关的 JavaScript 代码,`menu.jsp` 可能是用于展示或操作树形菜单的 JSP 页面,而 `WEB-INF` 和 `META-INF` 文件夹则是标准的 Java Web ...
ExtJS AJAX Tree是一种基于JavaScript的动态树形结构,它利用AJAX技术来异步加载节点数据,无需在服务器端生成完整的树结构。这种方式可以显著提高页面加载速度,尤其是在处理大量数据时。ExtJS是一个功能丰富的...
ExtJS Tree2是一个基于ExtJS库的树形控件,用于构建交互式的、层次结构的数据显示和管理。这篇博客文章可能详细介绍了如何使用和自定义这个控件,但遗憾的是,由于没有提供实际的博客内容,我将根据ExtJS Tree的一般...
在这个“struts2与extjs tree的完美结合”的示例中,开发者利用了Struts2的Annotation特性来简化配置,以及Struts2JSON插件来处理JSON数据,从而实现在服务器端动态生成和返回Tree节点。Annotation使得开发者能够在...
在"Extjs tree and Grid(Buffer Grid,Progress Grid)"这个主题中,我们将深入探讨这两个核心组件以及它们的特定变体——缓冲网格(Buffer Grid)和进度网格(Progress Grid)。 1. **ExtJS Tree** - 树形控件...
树形菜单(Tree)是ExtJs中的一个重要组件,它允许用户以层级结构展示数据,广泛应用于文件系统、组织结构或者导航菜单等场景。"ExtJs_TreeDemo"是一个示例,展示了如何在ExtJs中实现树形菜单的功能。 在ExtJs中,...
ExtJS Tree + JSON + Struts2 示例源代码详解 在Web开发中,构建交互式的用户界面是关键。ExtJS是一个强大的JavaScript库,尤其擅长创建桌面级的Web应用。本示例将详细介绍如何结合ExtJS的Tree组件、JSON数据格式...