从grid向tree的dd

做了一个从grid中将记录拖拽到树中的例子，代码如下：

 // 使用一个Json数据结构作为tree的本地数据源
	// 参考“http://ccmv.iteye.com/admin/blogs/154049”
	var nodes = [  
		{'text' : 'SY0706', 'id' : 1, 'leaf' : false, 'cls' : 'folder', 'children' : [  
			{'text' : '1', 'id' : 11, 'leaf' : false, 'cls' : 'folder', 'children' : [
				{'text' : '01', 'id' : 111, 'leaf' : true, 'cls' : 'file'},
				{'text' : '02', 'id' : 112, 'leaf' : true, 'cls' : 'file'},  
				{'text' : '03', 'id' : 113, 'leaf' : true, 'cls' : 'file'},  
				{'text' : '04', 'id' : 114, 'leaf' : true, 'cls' : 'file'},  
				{'text' : '05', 'id' : 115, 'leaf' : true, 'cls' : 'file'}  
			]}, 
			{'text' : '2', 'id' : 12, 'leaf' : false, 'cls' : 'folder', 'children' : [ 
				{'text' : '06', 'id' : 121, 'leaf' : true, 'cls' : 'file'},  
				{'text' : '07', 'id' : 122, 'leaf' : true, 'cls' : 'file'},  
				{'text' : '08', 'id' : 123, 'leaf' : true, 'cls' : 'file'},  
				{'text' : '09', 'id' : 124, 'leaf' : true, 'cls' : 'file'},  
				{'text' : '10', 'id' : 125, 'leaf' : true, 'cls' : 'file'}  
			]}
		]} 
	]; 
	
	// 拖拽时需要用到的函数，用来处理添加树结点
	/*
	 * TreeNode 	node 		:	tree上的目标结点
	 * TreeNode 	refNode 	:	目标结点的子结点，用于定位新添加的结点
	 * Record Array	selections	:	从grid中选取的记录数组	
	 */
	var ddFunction = function(node, refNode, selections) {
		for(var i = 0; i < selections.length; i ++) {
			var record = selections[i];
			node.insertBefore(new Tree.TreeNode({
				text: record.get('text'),
				id: record.get('id'),
				leaf: record.get('leaf'),
				cls: record.get('cls')
			}), refNode);
		}
	}
	
	// 建一棵树，并将其设置到tgDD拖动组中
	var Tree = Ext.tree;  
	
	var tree = new Tree.TreePanel({
		renderTo: 'tree',
		animate: true,  
		loader: new Tree.TreeLoader(),
		lines: true,  
		selModel: new Ext.tree.MultiSelectionModel(),  
		containerScroll: false,
		autoHeight: true,
		root: new Tree.AsyncTreeNode({  
			text: 'BUAA',  
			draggable: false,  
			id: 0,  
			children: nodes,
			expanded: true
		}),
		enableDD: true,
		ddGroup: "tgDD",
		listeners: {
			// 监听beforenodedrop事件，主要就是在这里工作
			// 参考“http://www.iteye.com/topic/155272”中的讨论
			beforenodedrop: function(dropEvent) {
				var node = dropEvent.target;	// 目标结点
				var data = dropEvent.data;	    // 拖拽的数据
				var point = dropEvent.point;	// 拖拽到目标结点的位置
				// 如果data.node为空，则不是tree本身的拖拽，而是从grid到tree的拖拽，需要处理
				if(!data.node) {
					switch(point) {
						case 'append':
							// 添加时，目标结点为node，子结点设为空
							ddFunction(node, null, data.selections);
							break;
						case 'above':
							// 插入到node之上，目标结点为node的parentNode，子结点为node
							ddFunction(node.parentNode, node, data.selections);
							break;
						case 'below':
							// 插入到node之下，目标结点为node的parentNode，子结点为node的nextSibling
							ddFunction(node.parentNode, node.nextSibling, data.selections);
							break;
					}
				}
			}
		}
	});
	
	// grid的数据源
	var data = [  
		['11', 211, true, 'file'],
		['12', 212, true, 'file'],
		['13', 213, true, 'file'],
		['14', 214, true, 'file'],
		['15', 215, true, 'file'],
		['16', 221, true, 'file'],
		['17', 222, true, 'file'],
		['18', 223, true, 'file'],
		['19', 224, true, 'file'],
		['20', 225, true, 'file']
	];

	var store = new Ext.data.Store({
		reader: new Ext.data.ArrayReader({}, [
	       {name: 'text'},
	       {name: 'id'},
	       {name: 'leaf'},
	       {name: 'cls'}
    	])
	});
	store.loadData(data);

	// 建一个grid，并设置到tgDD拖拽组中
	var Grid = Ext.grid;
	
	var model = new Grid.ColumnModel([
	    {header: "text", width: 50, sortable: true, dataIndex: 'text'},
	    {id:'id', header: "id", width: 50, sortable: true, dataIndex: 'id'},
	    {header: "leaf", width: 50, sortable: true, dataIndex: 'leaf'},
	    {header: "cls", width: 50, sortable: true, dataIndex: 'cls'}
	]);
	

	
	var grid = new Grid.GridPanel({
		renderTo: 'grid',
		ds: store,
		cm: model,
		sm: new Grid.RowSelectionModel(),
		autoHeight: true,
		enableDragDrop: true,
		ddGroup: "tgDD"
	});

上面是js中的代码，只需要再配上一个html就可以运行，不用后台。
效果是从grid到tree可以拖拽添加一个或多个结点，tree自身的拖拽也不会受到影响。
如果大家有更好的方法，请一起讨论一下。
还有就是，谁知道能不能从tree向grid拖拽添加数据？就是选取tree上的一个结点，拖拽到grid上，使得grid中在被放置的位置多出一条记录。

评论

6 楼 xianrong826 2009-03-13  

从树拖到表格主要就是要在表格Render的时候监听这个事件在方法里面覆盖表格的dropZone为Ext.dd.DropZone并覆盖onNodeOver方法和onNodeDrop方法就可以了

5 楼 hesy_007 2008-08-21  

可以看看这个帖子
Drag and Drop from Tree to Grid：http://extjs.com/forum/showthread.php?t=42762

4 楼 pepsibobo 2008-08-14  

理论实现:从tree向grid拖拽数据 可以将需要的属性都设置为treeNode的属性,当拖动树的节点至grid的时候根据属性去生成一个record  然后insert进grid就好了 .这是比较笨的办法噢 不知道可不可以通过Ext的DD系列的匹配.还没研究过DD噢。`。`

3 楼 sugarwyc 2008-08-12  

从tree向grid拖拽添加数据有研究出来了吗？

2 楼 wangtong40 2008-05-21  

楼主写得不错，学习中。。。。

1 楼 exyral 2008-05-21  

补充说明一下，之所以不监听“nodedrop”事件，我的理解是因为不想覆盖掉tree自身拖拽事Ext已经写好的程序，配合上判断data.node是否为空，就可以避免tree自身拖拽无效。

引申开来，当我们想在为某个事件添加动作的时候，最好是添加beforeXXX或者afterXXX方法，当真的想改变某个事件的处理方式的时候，再重写事件本身的方法。