peter2009
- 浏览: 549033 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
beck_iceblock：
[/color][color=white][color=oli ...
MYSQL的group_concat()函数中实现将多行同一字段数据合并成一个数据 -
瞎折腾球：
fristname 和 list name ，email填什么 ...
JetBrain WebStorm 注册码 -
瞎折腾球：
Your license key cannot be foun ...
JetBrain WebStorm 注册码 -
学习学习学习11111：
第一个可用，感谢 ，赞一个
JetBrain WebStorm 注册码 -
ichenwenjin：
不错,能用
JetBrain WebStorm 注册码
将TreePanel的数据向GridPanel中拖拽的功能！
Ext.onReady(function(){
//创建tree
var tree = new Ext.tree.TreePanel({
ddGroup : 'gridDDGroup',
title:'全部的组织机构',
animate:true,
autoScroll:true,
loader:new Ext.tree.TreeLoader({
dataUrl: apppath+'/back/jsp/organise/findalldepartment.html',
listeners:{
'beforeload':function(treeloader,node){
this.baseParams.depparentid = node.attributes.depid;
}
}
}),
root: new Ext.tree.AsyncTreeNode({
depid:157,iconCls:'depicon',
text:'利星行集团',id:'157'
}),
enableDD:true,
containerScroll: true,
border : true,
width : 250,
height : 300,
region : 'west',
listeners:{'nodedrop':function(e){}},
dropConfig: {appendOnly:true}
});
tree.getRootNode().expand();
//创建GridPanel
var myData = [];
var fields = [
{name: 'deplevel',mapping : 'deplevel'},
{name: 'depid' ,mapping : 'depid'},
{name: 'depparentid',mapping : 'depparentid'},
{name: 'depparentname',mapping : 'depparentname'},
{name: 'text', mapping:'depname'}
];
// create the data store
var gridStore = new Ext.data.JsonStore({
fields : fields,
url : 'findallorgrolesbyroleid.html',
baseParams : {ids:roledepid},
autoLoad : true
});
window.delRecord = function(value){
var _sel = grid.getSelectionModel().getSelections();
gridStore.remove(_sel[0]);
}
// Column Model shortcut array
var cols = [
{id : 'text', header: "单位名称", width: 100, sortable: true, dataIndex: 'text'},
{header: "上级单位名称", width: 150, sortable: true, dataIndex: 'depparentname'},
{header: "单位编号", width: 100, sortable: true, dataIndex: 'depid'},
{header:"删除",width:100,sorttable:true,dataIndex:'depid',renderer:function(value){
return '<a href="#" onClick="delRecord('+value+')">删除</a>';
}}
];
// declare the source Grid
var grid = new Ext.grid.GridPanel({
store : gridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'text',
width : 325,
region : 'center',
title : '所管理的单位',
selModel : new Ext.grid.RowSelectionModel({singleSelect : true})
});
//Simple 'border layout' panel to house both grids
var displayPanel = new Ext.Panel({
title:'"'+rolename+'"-主管部门管理',
width : 650,
height : 300,
layout : 'border',
tbar:['->','-',
{
text:'保存',
iconCls:'db-icn-add',
handler:function(){
var _ids = new Array();
for (var i = 0; i < grid.getStore().getCount(); i++) {
var _rec = grid.getStore().getAt(i);
_ids.push(_rec.get('depid'));
}
Ext.Ajax.request({
url:'updateorgroles.html',
params:{ids:_ids.join(','),rid:roleid},
method:'POST',
success:function(option,response){
var _obj = Ext.decode(option.responseText);
if(_obj.success){
Ext.example.msg('系统提示', '保存管理单位权限成功! ');
}else{
Ext.example.msg('系统提示', '保存管理单位权限失败! ');
}
},
failure:function(option,response){
Ext.example.msg('系统提示', '保存管理单位权限失败! ');
}
});
}
},'-',
{
text:'树形列表方式查看',
iconCls:'tree',
handler:function(){
var _form = document.createElement('form');
document.body.appendChild(_form);
_form.action = 'organiserolestree.jsp';
_form.method = 'POST'
var _ids = document.createElement('input');
_ids.value = roledepid;
_ids.name = 'depids';
_ids.type = 'hidden';
var _id = document.createElement('input');
_id.value = roleid;
_id.name = 'id';
_id.type = 'hidden';
var _name = document.createElement('input');
_name.value = rolename;
_name.name = 'name';
_name.type = 'hidden';
_form.appendChild(_ids);
_form.appendChild(_id);
_form.appendChild(_name);
_form.submit();
}
}
,'-',
{
text:'返回权限管理',
iconCls:'btn-login-reset',
handler:function(){
location.href = apppath+'/back/jsp/roles/roles.html';
}
}
],
items : [tree,grid],
bbar : [
'->', // Fill
{
text : '清除重新选择',
iconCls : 'bin_empty',
handler : function() {
gridStore.loadData(myData);
}
},'-',
{
text : '刷新列表',
iconCls : 'refresh',
handler : function() {
gridStore.reload();
}
}
]
});
var _view = new Ext.Viewport({
items:[displayPanel],
renderTo:Ext.getBody(),
layout:'fit'
});
// used to add records to the destination stores
var blankRecord = Ext.data.Record.create(fields);
/****
* Setup Drop Targets
***/
// This will make sure we only drop to the view container
var formPanelDropTargetEl = grid.body.dom;
//
var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {
ddGroup : 'gridDDGroup',
notifyEnter : function(ddSource, e, data) {
grid.body.stopFx();
grid.body.highlight();
},
notifyDrop : function(ddSource, e, data){
//这里添加选择的数据将选择的数据make a record 加到数据集里面
var node = ddSource.dragData.node;
//判断是否选择了同一个部门,不允许选择同一个部门!
var _ishave = false;
for (var i = 0; i < grid.getStore().getCount(); i++) {
var _rec = grid.getStore().getAt(i);
if(_rec.get('depid')==node.attributes.depid)
{
_ishave = true;
break;
}
}
if(_ishave){
Ext.example.msg('系统提示', '您已经有管理这个" {0} "部门(单位)的权限了! ', node.attributes.text);
return;
}
var Department = grid.getStore().recordType;
var dep = new Department({
deplevel: node.attributes.deplevel,
depid: node.attributes.depid,
depparentid: node.attributes.depparentid,
depparentname: node.attributes.depparentname,
text: node.attributes.text
});
gridStore.insert(0,dep);
return(true);
}
});
});
- 大小: 16.1 KB
0
顶
顶
2
踩
踩
分享到：
评论
2 楼
peter2009
2011-07-30
我参考着Ext3 的 例子
搞定了
谢谢哈
搞定了
谢谢哈
/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){
//创建tree
var tree = new Ext.tree.TreePanel({
ddGroup : 'gridDDGroup',
title:'全部的组织机构',
animate:true,
autoScroll:true,
loader:new Ext.tree.TreeLoader({
dataUrl: apppath+'/back/jsp/organise/findalldepartment.html',
listeners:{
'beforeload':function(treeloader,node){
this.baseParams.depparentid = node.attributes.depid;
}
}
}),
root: new Ext.tree.AsyncTreeNode({
depid:157,iconCls:'depicon',
text:'集团',id:'157'
}),
enableDD:true,
containerScroll: true,
border : true,
width : 250,
height : 300,
region : 'west',
listeners:{'nodedrop':function(e){}},
dropConfig: {appendOnly:true}
});
tree.getRootNode().expand();
//创建GridPanel
var myData = [];
var fields = [
{name: 'deplevel',mapping : 'deplevel'},
{name: 'depid' ,mapping : 'depid'},
{name: 'depparentid',mapping : 'depparentid'},
{name: 'depparentname',mapping : 'depparentname'},
{name: 'text', mapping:'depname'}
];
// create the data store
var gridStore = new Ext.data.JsonStore({
fields : fields,
url : 'findallorgrolesbyroleid.html',
baseParams : {ids:roledepid},
autoLoad : true
});
window.delRecord = function(value){
var _sel = grid.getSelectionModel().getSelections();
gridStore.remove(_sel[0]);
}
// Column Model shortcut array
var cols = [
{id : 'text', header: "单位名称", width: 100, sortable: true, dataIndex: 'text'},
{header: "上级单位名称", width: 150, sortable: true, dataIndex: 'depparentname'},
{header: "单位编号", width: 100, sortable: true, dataIndex: 'depid'},
{header:"删除",width:100,sorttable:true,dataIndex:'depid',renderer:function(value){
return '<a href="#" onClick="delRecord('+value+')">删除</a>';
}}
];
// declare the source Grid
var grid = new Ext.grid.GridPanel({
store : gridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'text',
width : 325,
region : 'center',
title : '所管理的单位',
selModel : new Ext.grid.RowSelectionModel({singleSelect : true})
});
//Simple 'border layout' panel to house both grids
var displayPanel = new Ext.Panel({
title:'"'+rolename+'"-主管部门管理',
width : 650,
height : 300,
layout : 'border',
tbar:['->','-',
{
text:'保存',
iconCls:'db-icn-add',
handler:function(){
var _ids = new Array();
for (var i = 0; i < grid.getStore().getCount(); i++) {
var _rec = grid.getStore().getAt(i);
_ids.push(_rec.get('depid'));
}
Ext.Ajax.request({
url:'updateorgroles.html',
params:{ids:_ids.join(','),rid:roleid},
method:'POST',
success:function(option,response){
var _obj = Ext.decode(option.responseText);
if(_obj.success){
Ext.example.msg('系统提示', '保存管理单位权限成功! ');
}else{
Ext.example.msg('系统提示', '保存管理单位权限失败! ');
}
},
failure:function(option,response){
Ext.example.msg('系统提示', '保存管理单位权限失败! ');
}
});
}
},'-',
{
text:'树形列表方式查看',
iconCls:'tree',
handler:function(){
var _form = document.createElement('form');
document.body.appendChild(_form);
_form.action = 'organiserolestree.jsp';
_form.method = 'POST'
var _ids = document.createElement('input');
_ids.value = roledepid;
_ids.name = 'depids';
_ids.type = 'hidden';
var _id = document.createElement('input');
_id.value = roleid;
_id.name = 'id';
_id.type = 'hidden';
var _name = document.createElement('input');
_name.value = rolename;
_name.name = 'name';
_name.type = 'hidden';
_form.appendChild(_ids);
_form.appendChild(_id);
_form.appendChild(_name);
_form.submit();
}
}
,'-',
{
text:'返回权限管理',
iconCls:'btn-login-reset',
handler:function(){
location.href = apppath+'/back/jsp/roles/roles.html';
}
}
],
items : [tree,grid],
bbar : [
'->', // Fill
{
text : '清除重新选择',
iconCls : 'bin_empty',
handler : function() {
gridStore.loadData(myData);
}
},'-',
{
text : '刷新列表',
iconCls : 'refresh',
handler : function() {
gridStore.reload();
}
}
]
});
var _view = new Ext.Viewport({
items:[displayPanel],
renderTo:Ext.getBody(),
layout:'fit'
});
// used to add records to the destination stores
var blankRecord = Ext.data.Record.create(fields);
/****
* Setup Drop Targets
***/
// This will make sure we only drop to the view container
var formPanelDropTargetEl = grid.body.dom;
//
var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {
ddGroup : 'gridDDGroup',
notifyEnter : function(ddSource, e, data) {
grid.body.stopFx();
grid.body.highlight();
},
notifyDrop : function(ddSource, e, data){
//这里添加选择的数据将选择的数据make a record 加到数据集里面
var node = ddSource.dragData.node;
//判断是否选择了同一个部门,不允许选择同一个部门!
var _ishave = false;
for (var i = 0; i < grid.getStore().getCount(); i++) {
var _rec = grid.getStore().getAt(i);
if(_rec.get('depid')==node.attributes.depid)
{
_ishave = true;
break;
}
}
if(_ishave){
Ext.example.msg('系统提示', '您已经有管理这个" {0} "部门(单位)的权限了! ', node.attributes.text);
return;
}
var Department = grid.getStore().recordType;
var dep = new Department({
deplevel: node.attributes.deplevel,
depid: node.attributes.depid,
depparentid: node.attributes.depparentid,
depparentname: node.attributes.depparentname,
text: node.attributes.text
});
gridStore.insert(0,dep);
return(true);
}
});
});
1 楼
babydeed
2011-07-28
少了很多很多
以下代码还需修改 你自己改改吧
以下代码还需修改 你自己改改吧
<script type="text/javascript">
Ext.onReady(function(){
var tree = new Ext.tree.TreePanel({
title:'全部的组织机构',
animate:true,
el:"tree",
autoScroll:true,
loader: new Ext.tree.TreeLoader(),
enableDD:true,
containerScroll: true,
border: true,
width: 250,
height: 300,
ddGroup:"xx"
//,dropConfig: {appendOnly:true}
});
var root = new Ext.tree.TreeNode({
text: 'Ext JS1',
draggable:false, // disable root node dragging
id:'src'
});
var node1 = new Ext.tree.TreeNode({
text: 'Ext JS2',
draggable:true, // disable root node dragging
id:'src'
});
var node2 = new Ext.tree.TreeNode({
text: 'Ext JS',
draggable:true, // disable root node dragging
id:'src'
});
root.appendChild(node1);
root.appendChild(node2);
var grid = new Ext.grid.GridPanel(
{
store:new Ext.data.JsonStore({
data:[{id:'1',name:'aa'},{id:'2',name:'bb'}],
autoLoad:true,
fields:['id','name']
}),
renderTo:"g",
ddGroup:"xx",
enableDragDrop: true,
//draggable:true,
cm:new Ext.grid.ColumnModel([{dataIndex:'id',header:'编号'},{dataIndex:'name',header:'名称'}]),
width:250,
height:300
}
);
tree.setRootNode(root);
var f = Ext.data.Record.create([
{name: 'id', type: 'string'},
{name: 'name', type: 'name'}
]);
var dropZone = new Ext.dd.DropZone(grid.getEl(),{
ddGroup: 'xx',
notifyDrop: function(source, e, obj) {
var r = new f({"id":obj.node.id,"name":obj.node.text});
grid.store.add(r)
}
});
tree.render();
root.expand(true, true);
});
</script>
</head>
<body>
<div id="tree" style="height:300px;"></div>
<div id="g" style="height:300px;"></div>
</body>
</html>
发表评论
-
JetBrain WebStorm 注册码
2013-11-16 20:03 355827webStorm : UserName:William == ... -
乱喷的人名——未成年勿记
2013-07-27 16:41 2而至于那些什么北条香 ... -
理解转义的奥秘了
2013-04-25 16:51 860_o.innerHTML += '<div class= ... -
Sencha Touch2 后退按钮的导航应用
2012-05-29 16:13 4929Sencha Touch2 后退按钮的导航应用 系统中设置几个 ... -
可以将Upload控件里面的内容清空的代码
2012-02-20 08:53 1120_win.form.getForm().getEl().dom ... -
一个大师高深的评论：
2011-12-16 09:20 923一个大师高深的评论： 一定的N层结构, 层数越多越 ... -
比较工具3注册码
2011-12-06 10:16 455mv1nPlXAywBDCdhxFc9QOVv6TBcQHLA ... -
表单验证
2011-09-08 08:56 827{ xtype:'textfield', ... -
用JS获取请求地址中的参数和值
2011-08-30 10:33 3021unction GetUrlParameter(paramNa ... -
真有这样的好企业吗！ Dream Team
2011-08-27 11:20 1053一定的N层结构, 层数越多越好,层少了用户误会我们 ... -
ExtJs 与 Structs2交互的几大总结
2011-08-05 08:36 2466package com.ysu.core.action; ... -
写一个Ext控件的理论
2011-08-05 08:29 1011经大漠穷秋的点拨 编写一个Ext的控件要注意一下 ini ... -
学习一个东西的步骤
2011-03-14 15:56 809个人觉得学习一个东西的步骤： 注 这个是KK 的经验 我只是 ... -
我的2011计划安排
2011-01-21 13:47 8391. 在这一年里 学会用 JBOSS，IBM WEBSPARE ... -
Ext Combox在手动输入的时候hiddenName和name不能重复
2010-09-16 13:26 2911... -
关于GridPanel中 行操作参数传递的问题
2010-09-16 11:01 1171var outcm = new Ext.grid.Colu ... -
关于两个form中 Ext DateField 表单的验证
2010-09-05 14:41 2956//判断两个日期差 Ext.apply(Ext.form ... -
Ext Grid 查询并能分页的代码
2010-08-06 15:03 1788最终完整代码为 onQueryWinSubmit:fu ... -
Ext TabPanel 的竖排布局
2010-03-01 12:37 1551TabPanel 这样能布局吗！ 想把这个变成下面那幅图的样 ... -
轻松修改TreePanel 的图标样式 和 背景图片
2010-02-09 14:26 7263给树形结构定义图标 的css .x-tree-node- ...
相关推荐
ext的tree两个拖拽例子，话不多说，详见代码
自己整理的ext涉及的四种常见的tree 1.一次加载所有结点 2.可拖拽的tree 3.动态加载结点，每次展开结点需向后台获取数据 4.可维护的tree 结点维护
以前有许多人需要将 tree 的节点拖拽到其他控件中的问题，前段时间已经解决了，现在也将它的源代码贡献上来。 这个树的数据是静态的，没有做动态的，而且树节点的拖拽也没有做过多的处理，如果要知道怎么样做树...
NULL 博文链接：https://2o12.iteye.com/blog/1169874
由于项目的需要最近在学习ext，在项目中必不可少用到了tree，并且要对tree进行增、改、删的操作。上网找了很多不错的学习资料把这些功能组织在一起。在学习ext的过程中花了不少时间，我想很多网友刚开始学习ext的...
4.8. 关于表单内部控件的布局问题 4.8.1. 什么都不做，默认的平铺布局 4.8.2. 分裂，分列 4.8.3. fieldset是个神奇的东西 4.8.4. 当某一天，需要往form加个图片什么的，该咋办？ 4.9. 还要做文件上传哟 4.10. 非想非...
即：Ext.window 4.mainPage.html为tab布局，右面为tree中间为tab页面。 5.tz-normal-test.html为普通拖拽的练习。 6.tree-asynch-test.html为异步加载的树 7.tree-edit-test.html为节点可以编辑的树 8.tree-tz-test....
ExtJS4官方指南翻译：DragandDrop拖放/Grid组件/Tree组件/容器与布局
4.8. 关于表单内部控件的布局问题 4.8.1. 什么都不做，默认的平铺布局 4.8.2. 分裂，分列 4.8.2.1. 分裂，分列。1.x 4.8.2.2. 分裂，分列。2.0 4.8.3. fieldset是个神奇的东西 4.8.4. 当某一天，需要往form加个图片...
即：Ext.window 4.mainPage.html为tab布局，右面为tree中间为tab页面。 5.tz-normal-test.html为普通拖拽的练习。 6.tree-asynch-test.html为异步加载的树 7.tree-edit-test.html为节点可以编辑的树 8.tree-tz-...
再加上可编辑grid，添加新行，删除一或多行，提示多行数据，拖拽改变grid大小，grid之间拖拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件...
再加上可编辑grid，添加新行，删除一或多行，提示脏数据，推拽改变grid大小，grid之间拖拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件里...
4.8. 关于表单内部控件的布局问题 4.8.1. 什么都不做，默认的平铺布局 4.8.2. 分裂，分列 4.8.2.1. 分裂，分列。1.x 4.8.2.2. 分裂，分列。2.0 4.8.3. fieldset是个神奇的东西 4.8.4. 当某一天，需要往form加...
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...
treePanel到panel的拖拽 直接动态拖拽等操作，涉及到的代码，和效果图片都在word文档里面
menuTree:new Ext.tree.TreePanel({ title:'功能菜单', region:'west', bodyStyle:'background:transparent url(images/default/panel/group-lr.gif) repeat-x 0 bottom;', id:'extExample-tree', autoScroll:true, ...
再加上可编辑grid，添加新行，删除一或多行，提示脏数据，推拽改变grid大小，grid之间推拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件...
可以把grid直接拖到tree，不同于其他的例子，拖动grid后会在tree中加一个叶子节点，大家试下就会明白。 自己练习用的哦，做的不好不要骂我，哪里不好希望大家包涵。 本人qq ：784027965 大家学习happy哈^_^
再加上可编辑grid，添加新行，删除一或多行，提示脏数据，推拽改变grid大小，grid之间推拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件...
支持用shift和ctrl来选择用户要拖动的树的节点和叶子。 功能非常强大。