请问如何拖动树的内部和保存树

extjs可拖动树的实例
2009-05-11 10:01
ext提供的树本身就有拖拽的功能，也许大部分使用过TreePanel的都知道。可是光是在前台拖来拖去那是空把式不是吗？因此必须获取拖拽的事件才能与后台交互。因此现在就说一下如何获取tree的拖拽事件。对于要想让tree可以拖拽，那么必须为tree的enableDD属性设置为true。其实事件最常用的就是nodedrop。eg：tree.on('nodedrop',function(){ …… });
js代码：//节点可以编辑的树
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" />
<link rel="Book" href="favicon.ico" />
<link href="css/default.css" rel="stylesheet" type="text/css">

<script language="javascript" type="text/javascript" src="js/prototype.js"></script>
</head>
<body>

<div id="loadingTab">
<div class="loading-indicator">
<img src="images/public/loader.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>
<a href="index.html">可拖拽的树练习</a> -
<span id="loading-yfo"><a 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" rel="stylesheet" type="text/css">
<script type="text/javascript">$('loading-msg').innerHTML = '正在加载JSUI组建...';</script><script language="javascript" type="text/javascript" src="js/ext-2.0/adapter/ext/ext-base.js"></script>
<script language="javascript" type="text/javascript" src="js/ext-2.0/ext-all.js"></script>
<script language="javascript" type="text/javascript" src="js/ext-2.0/source/locale/ext-lang-zh_CN.js"></script><script type="text/javascript">$('loading-msg').innerHTML = '正在初始化...';</script><script type="text/javascript" src="js/tree-tz-test.js"></script>
<script type="text/javascript">
$('loading-msg').innerHTML = '初始化完毕！！';
Ext.get('loadingTab').fadeOut({remove: true});//让加载标签消失
</script>
</body>
</html>本例子的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，表示这个节点不可以拖动，否则可以。本例的意图是卡卡西班和凯班为父节点，所以是不可拖动的，其孩子比如鸣人，佐助可是拖动的。希望对你有帮助

flex似乎实现起来很容易、、、、

树的拖动只是客户端js层的表现，你真正要关心的是拖动事件发生后能够有效的获取到父子节点关系的变化并在相应的Action后台触发后端数据库的更新

我同在可以用TreeNode生成树而且只能内部拖动了
但是怎么用TreeNode动态生成树呢？！~
EXTJS 传的JSON数据格式的原理是什么

辛苦啊！解决了代码贴出Ext.onReady(function() {
Ext.QuickTips.init();// 浮动信息提示
Ext.BLANK_IMAGE_URL = 'images/s.gif';// 替换图片文件地址为本地   // 创建一个简写
var _Tree = Ext.tree;
// 定义根节点的Loader
var _treeloader = new _Tree.TreeLoader( {
// dataUrl : 'tree.jsp'//这里可以不需要指定URL，在加载前事件响应里面设置
});
// 添加一个树形面板
var _treepanel = new _Tree.TreePanel( {
// renderTo:"tree_div",//如果使用renderTo，则不能使用setRootNode()方法，需要在TreePanel中设置root属性。
//el : 'tree-panel1',// 将树形添加到一个指定的div中,非常重要！
el : Ext.getBody(),
region : 'west',
//title : '功能菜单',
width : 200,//面板宽度
minSize : 180,
maxSize : 250,
split : true,
autoHeight : false,
frame : true,// 美化界面
// title : '可编辑和拖动的异步树',//标题
// autoScroll : true, // 自动滚动
enableDD : true,// 是否支持拖拽效果
containerScroll : true,// 是否支持滚动条
rootVisible : true, // 是否隐藏根节点,很多情况下，我们选择隐藏根节点增加美观性
border : true, // 边框
animate : true, // 动画效果
loader : _treeloader
// 树加载
}); // 异步加载根节点
var _rootnode = new _Tree.AsyncTreeNode( {
id : 'root',
text : '用户权限列表',
draggable : false,// 根节点不容许拖动
expanded : true
});
// 为tree设置根节点
_treepanel.setRootNode(_rootnode); // 响应加载前事件，传递node参数
_treepanel.on('beforeload', function(node) {
_treepanel.loader.dataUrl = 'back/back!tree';// 定义子节点的Loader
}); // 渲染树形
_treepanel.render();
// 展开节点,第一个参数表示是否级联展开子节点
_rootnode.expand(false); //只让同类之间移动
_treepanel.on('beforemovenode', function(tree, tt, oldParent,
newParent, index) {
if (oldParent.id == newParent.id) {
return true;
}
return false;
}); _treepanel.on('beforenodedrop', function(obj) {
if (obj.dropNode.parentNode == obj.target.parentNode) {
if (obj.dropNode.parentNode.id == "root") {
//移动的是父节点时,大类要刷小类不用刷新
Ext.Ajax.request( {
url : 'back/ajax!tree?task=big&startbigid='
+ obj.dropNode.id + '&endbigid=' + obj.target.id,
success : function() {
location.reload();
}
}); } else {
//移动的是小节点时
Ext.Ajax.request( {
url : 'back/ajax!tree?task=small&startsmallid='
+ obj.dropNode.id + '&endsmallid=' + obj.target.id }); }
return true;
}
return false;
} );
});

调试易

请问如何拖动树的内部和保存树

解决方案 »