ExtJs tree的操作

最新推荐文章于 2017-06-05 18:40:25 发布

iteye_9657

最新推荐文章于 2017-06-05 18:40:25 发布

阅读量100

点赞数

CC 4.0 BY-SA版权

分类专栏： html&css&javascript 文章标签： EXT

本文链接：https://blog.youkuaiyun.com/iteye_9657/article/details/81785566

html&css&javascript 专栏收录该内容

43 篇文章

订阅专栏

本文详细介绍了如何使用ExtJS构建一个具有拖拽功能的树形控件，包括设置属性、绑定事件以及实现节点拖动的具体代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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. });