做了一个从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中在被放置的位置多出一条记录。
分享到:
相关推荐
在"ExtJS4官方指南翻译:DragandDrop拖放/Grid组件/Tree组件/容器与布局"中,我们将会探讨以下几个核心概念: 1. **Drag and Drop(拖放)**: ExtJS4提供了完善的拖放支持,允许用户通过鼠标操作在界面上移动元素...
- 实现拖放需要扩展`Ext.dd.DragSource`和`Ext.dd.DropTarget`。 9. **自定义节点模板** - 使用`tpl`配置项定义节点的HTML模板,或使用`renderer`函数动态渲染节点内容。 10. **API参考** ExtJS Tree API提供了...
根据提供的信息,我们可以深入探讨Ext JS中的拖动功能,特别是针对树(Tree)和表格(Grid)的拖动操作。本文将详细介绍这些概念和技术要点。 ### 一、Ext JS 拖动的基本概念 #### 1.1 拖动源与目标 在Ext JS中,拖动...
在本文中,我们将深入探讨如何使用...通过理解ExtJS的DD API和正确配置Tree与Grid组件,我们可以创建出具有高度交互性和灵活性的Web应用。在实际项目中,还需要考虑性能优化,如延迟渲染和批量操作,以提升用户体验。
本文主要针对Ext JS中的树(Tree)和表格(Grid)控件进行深入探讨,详细介绍其拖拽功能的实现原理及应用场景。 #### 二、拖拽功能概述 在Ext JS中,拖拽功能主要通过`DragSource`和`DropTarget`两个核心概念来实现。 -...
这个设计器可能使用了`Ext.grid.Panel`或`Ext.tree.Panel`来展示可用的控件库,而工作区则使用了某种布局管理器来处理控件的放置。 为了实现控件的拖放,开发者通常还需要处理一些细节,例如: 1. **阻止默认...
-修正了Grid列属性DataFormatString的一个bug,比如设置{0:yy-MM-dd HH:mm}时没有效果。 -修正下拉列表控件不能绑定DataTable的BUG(feedback:RedOcean)。 -增加土耳其语言资料文件(feedback:abdullaharslan)。 -...
-这样所有需要占据全屏的Panel(不管你是Accordion,Panel,ContentPanel,Form,GroupPanel,SimpleForm,Tree还是Grid,TabStrip)都可以通过这种方式全屏。 -简单方便,示例可以参考 default.aspx 或者 other\...
7.5.11 树节点:ext.data.nodeinterface与ext.data.tree / 364 7.5.12 store的方法 / 366 7.5.13 store的事件 / 368 7.5.14 store管理器:ext.data.storemanager / 369 7.6 综合实例 / 369 7.6.1 远程读取json...
卷 (USB)Project 的文件夹 PATH 列表 卷序列号码为 0006EE44 CCBE:F425 I:. │ .project │ pom.xml │ pom.xml~ │ text.txt │ ├─.settings │ org.maven.ide.eclipse.prefs ...│ │ org.eclipse.wst.common....
用于展示数据的组件,如`Grid`、`Listbox`、`Tree`等。 ##### Grid 用于展示表格形式的数据。 - **示例代码**: ```java // 创建一个Grid实例 Grid grid = new Grid(); grid.appendChild(new Column("编号")); ...
1. **组件化**:EXT 3.0提供了一整套可复用的UI组件,如表格(Grid)、面板(Panel)、窗口(Window)、表单(Form)、树形视图(Tree)、菜单(Menu)等,这些组件可以组合成复杂的应用界面。 2. **MVC架构**:EXT...
jQuery EasyUI还包括其他多种组件,如Dialog(对话框)、Grid(数据网格)、Tree(树形结构)等,它们都有各自的配置参数和方法,可以根据项目需求灵活使用。 ### 4. 应用场景 jQuery EasyUI广泛应用于网页应用...
5. **表格和网格**:Ext.grid组件是展示大量数据的强大工具,支持排序、分页、过滤等功能,并能与Store紧密配合,动态加载数据。 6. **表单处理**:Ext.form组件库提供了创建各种表单元素的能力,如文本框、下拉框...
6. **树形组件和网格**:EXT的`Ext.tree`和`Ext.grid`组件提供了展示和操作树状数据和表格数据的能力。源码中包含了分页、排序、过滤等功能的实现,对于构建数据驱动的应用程序非常有帮助。 7. **工具栏和菜单**:...
easyui 1.2.3 版本还引入了一个新的插件——propertygrid,允许用户在 datagrid 中编辑属性值。 - **扩展性**:每个 easyui 组件都可以通过这种方式进行扩展。 #### 五、Parser 功能 `$.parser.parse(context)` ...
$('#dd').dialog('mymove', {left: 200, top: 100}); ``` #### 二、Parser解析器 **Parser解析器**用于解析页面上的EasyUI组件,并初始化它们。 1. **用法**: - 解析整个页面:`$.parser.parse();` - 解析...