extjs可拖拽的tree实际应用

来源：互联网发布：mac 连不上wifi 编辑：程序博客网时间：2024/06/07 01:47

//节点可以编辑的树 Ext.namespace('demo'); demo = function(){ this.init();//初始化函数 }; Ext.extend(demo,Ext.util.Observable,{ init:function(){ //创建一个简写 var Tree = Ext.tree; //添加一个树形面板 this.tree = new Tree.TreePanel({ el:'tree-panel',//将树形添加到一个指定的div中 title:'可编辑的树', autoScroll:true, enableDD:true,//是否支持拖拽效果 containerScroll: true,//是否支持滚动条 loader:new Ext.tree.TreeLoader({ dataUrl:'tree-tz-test.json' }) }); //创建一个根节点 this.root = new Tree.AsyncTreeNode({ text: '木叶村', draggable:false, id:'source' }); //为tree设置根节点 this.tree.setRootNode(this.root); //渲染树形 this.tree.render(); this.root.expand(true); /*设置tree的节点放置函数此函数有一个很重要的参数对象e e对象有三个重要的属性，分别为dropNode,target,point 1.dropNode为在拖动时鼠标抓住的节点 2.target为将要放置在某处的节点 3.point为被放置的状态，分别有append表示添加，above节点的上方，below节点的下方。 */ this.tree.on('nodedrop',function(e){ if(e.point=='append'){ alert('当前"'+e.dropNode.text+'"被"'+e.target.text+'"录取！'); }else if(e.point=='above'){ alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"上面！'); }else if(e.point=='below'){ alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"下面！'); } }); } }); //实例化主程序类 Ext.BLANK_IMAGE_URL = 'images/public/s.gif"'; Ext.onReady(function(){ var myDemo = new demo(); //实例化 }); html： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>可拖拽的树</title> <link rel="shortcut icon" href="favicon.ico" mce_href="favicon.ico" /> <link rel="Bookmark" href="favicon.ico" mce_href="favicon.ico" /> <link href="css/default.css" mce_href="css/default.css" rel="stylesheet" type="text/css">  <mce:script language="javascript" type="text/javascript" src="js/prototype.js" mce_src="js/prototype.js"></mce:script> </head> <body>  <div id="loadingTab"> <div class="loading-indicator"> <img src="images/public/loader.gif" mce_src="images/public/loader.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;" mce_style="margin-right:8px;float:left;vertical-align:top;"/> <a href="index.html" mce_href="index.html">可拖拽的树练习</a> - <span id="loading-yfo"><a href="http://yfoffice.net.cn" mce_href="http://yfoffice.net.cn" target="_blank">忆凡工作室</a></span><br /> <span id="loading-msg">加载样式表和图片...</span> </div> </div> <br> <h1>拖拽tree的综合练习</h1> <div id="tree-panel" style=" margin:30px; width:300px; height:400px"></div> <link href="js/ext-2.0/resources/css/ext-all.css" mce_href="js/ext-2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css"> <mce:script type="text/javascript"></mce:script> <mce:script language="javascript" type="text/javascript" src="js/ext-2.0/adapter/ext/ext-base.js" mce_src="js/ext-2.0/adapter/ext/ext-base.js"></mce:script> <mce:script language="javascript" type="text/javascript" src="js/ext-2.0/ext-all.js" mce_src="js/ext-2.0/ext-all.js"></mce:script> <mce:script language="javascript" type="text/javascript" src="js/ext-2.0/source/locale/ext-lang-zh_CN.js" mce_src="js/ext-2.0/source/locale/ext-lang-zh_CN.js"></mce:script> <mce:script type="text/javascript"></mce:script> <mce:script type="text/javascript" src="js/tree-tz-test.js" mce_src="js/tree-tz-test.js"></mce:script> <mce:script type="text/javascript"></mce:script> </body> </html>

ext提供的树本身就有拖拽的功能，也许大部分使用过TreePanel的都知道。可是光是在前台拖来拖去那是空把式不是吗？因此必须获取拖拽的事件才能与后台交互。因此现在就说一下如何获取tree的拖拽事件。

对于要想让tree可以拖拽，那么必须为tree的enableDD属性设置为true。

其实事件最常用的就是nodedrop。eg：tree.on('nodedrop',function(){ …… });

本例子的json：

[
{
"text":"卡卡西班",
"id":"01",
"allowDrag":false,
"children":[
{"text":"小樱","id":"0101","leaf":true,"allowDrag":true},
{"text":"鸣人","id":"0102","leaf":true,"allowDrag":true},
{"text":"佐助","id":"0103","leaf":true,"allowDrag":true}
]
},
{
"text":"凯班",
"id":"02",
"allowDrag":false,
"children":[
{"text":"小李","id":"0201","leaf":true,"allowDrag":true},
{"text":"宁次","id":"0202","leaf":true,"allowDrag":true},
{"text":"天天","id":"0203","leaf":true,"allowDrag":true}
]
}
]

看看上面json可以看出，我为节点设置了一个allowDrag属性，如果该属性为false，表示这个节点不可以拖动，否则可以。本例的意图是卡卡西班和凯班为父节点，所以是不可拖动的，其孩子比如鸣人，佐助可是拖动的