浏览 7315 次
锁定老帖子 主题:从grid向tree的dd
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2008-05-21
// 使用一个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中在被放置的位置多出一条记录。 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2008-05-21
补充说明一下,之所以不监听“nodedrop”事件,我的理解是因为不想覆盖掉tree自身拖拽事Ext已经写好的程序,配合上判断data.node是否为空,就可以避免tree自身拖拽无效。
引申开来,当我们想在为某个事件添加动作的时候,最好是添加beforeXXX或者afterXXX方法,当真的想改变某个事件的处理方式的时候,再重写事件本身的方法。 |
|
返回顶楼 | |
发表时间:2008-08-12
从tree向grid拖拽添加数据有研究出来了吗?
|
|
返回顶楼 | |
发表时间:2008-08-14
理论实现:从tree向grid拖拽数据 可以将需要的属性都设置为treeNode的属性,当拖动树的节点至grid的时候根据属性去生成一个record 然后insert进grid就好了 .这是比较笨的办法噢 不知道可不可以通过Ext的DD系列的匹配.还没研究过DD噢。`。`
|
|
返回顶楼 | |
发表时间:2008-08-21
可以看看这个帖子
Drag and Drop from Tree to Grid:http://extjs.com/forum/showthread.php?t=42762 |
|
返回顶楼 | |
发表时间:2009-03-13
从树拖到表格主要就是要在表格Render的时候监听这个事件在方法里面覆盖表格的dropZone为Ext.dd.DropZone并覆盖onNodeOver方法和onNodeDrop方法就可以了
|
|
返回顶楼 | |