`
wuhaowei12345
  • 浏览: 45173 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

extJs 中,tree向grid 拖动或者tree向另一个Tree拖动

阅读更多
源树中当然正常写,但要在treepanel设置两个属性
enableDrag : true,
ddGroup : 'jldTreeDragDrop',    这个名字重要,以后要一样。

下面是grid的处理
this.gridSmX=new Ext.grid.CheckboxSelectionModel({
singleSelect : true
});
this.cm = new Ext.grid.ColumnModel([
    {header:'资源内部编码', sortable: true, dataIndex:'id',width:83},
    {header:'资源名称', sortable: true, dataIndex:'name',width:90},
    {header:'源系统名称', sortable: true, dataIndex:'sourceName',width:85},
    {header:'源系统资源标识', sortable: true, dataIndex:'sourceId',width:100},
    {header:'源系统资源名称', sortable: true, dataIndex:'sour_Psr_Name',width:100},
    {header:'源系统资源编码', sortable: true, dataIndex:'sourcePsrNo',width:100},
    {header:'运算符号',hidden:true,dataIndex:'symbol',width:90,renderer: this.formatSymbol,
   editor:new Ext.form.ComboBox({ 
valueField:'ivalue',
displayField:'dvalue',
mode: 'local',
triggerAction : 'all',
   store: new  Ext.data.ArrayStore({
fields: ['ivalue', 'dvalue'],
data:[
        ['1', '加法(+)'],
        ['-1', '减法(-)']
]
})
   })
    },
    {header:'系数',hidden:true,dataIndex:'factor',width:50,
           editor: new Ext.form.NumberField({
               allowBlank: false,
               allowNegative: true,
               maxLength: 13,
               decimalPrecision:6,
               maxValue: 999999.999999
           }),width:80
    },
    {header:'取绝对值',hidden:true,dataIndex:'abs',renderer: this.formatABS,
           editor: new Ext.form.Checkbox(),width:75
    },
    {header:'操作', dataIndex:'oper',renderer:this.gridDeleteButton,width:75}
]);
this.ds = new Ext.data.JsonStore({
url:this.queryRelationUrl ,
fields: [
   {name: 'id',mapping: 'psrid',type:'string'},
   {name: 'name',mapping: 'psrName',type:'string'},
   {name: 'sourceName',mapping: 'sourceSysName',type:'string'},
   {name: 'sourceId',mapping: 'sourcePsrId',type:'string'},
   {name: 'sour_Psr_Name',mapping: 'sourcePsrName',type:'string'},
   {name: 'sourcePsrNo',mapping: 'sourcePsrNo',type:'string'},
   {name: 'oper'},
   {name: 'symbol',mapping:'symbol',type:'int'},
   {name: 'factor',mapping:'factor',type:'double'},
   {name: 'abs',mapping:'abs', type: 'bool'},
   {name: 'sourceSysId',mapping: 'sourceSysId',type:'string'},
   {name: 'psrTypeCode',mapping: 'psrTypeCode',type:'string'}
]
});
this.gridRela = new Ext.grid.EditorGridPanel({
        region: 'center',
        split: true,
    cm: this.cm,
    ds: this.ds,
    sm: this.gridSmX,
    loadMask:true,
    autoScroll: 'true',
        ddGroup : 'jldTreeDragDrop',
isTarget : true,
autoExpandColumn: 6,
stripeRows: true,
clicksToEdit: 1,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
        listeners : {
render : function (g){
var secondGridDropTargetEl = this.getView().el.dom.childNodes[0].childNodes[1];
var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl,
{
ddGroup : 'jldTreeDragDrop',
copy : false,
notifyDrop : function(ddSource, e, data){
if(!proxyRelation.isQueryPsr){
disAlertInfo("请先选择左边的资源树里你要设置对应关系的资源!");
return ;
}
var sourceNode = ddSource.dragData.node;
if(sourceNode.attributes.isPsr=='false'){
disAlertInfo('不能对源系统资源类型设置对应关系');
return ;
}
var sourceParam=sourceNode.id.split("_");
proxyRelation.sourcePsrTypeId=sourceParam[0];
proxyRelation.sourcePsrId=sourceParam[1];

//调用方法统一处理拖动至树或者拖动至网格事件
proxyRelation.checkPsrRelationAndSave(proxyRelation.psrId,proxyRelation.psrTypeId,proxyRelation.sourceSys,proxyRelation.sourcePsrId,proxyRelation.sourcePsrTypeId,false);
}
});
}
}
});
//编辑表格
this.gridRela.on('afteredit',function(e){
var record = e.record;// 被编辑的记录
       
Ext.Ajax.request( {
url : proxyRelation.updateRelationUrl,
success: function(response, options) {
var json = Ext.decode(response.responseText);
if(!json){
disAlertInfo('更新对应关系失败,请检查书写数值');
//grid表格数据重新载入
proxyRelation.gridReloadFunction(proxyRelation.psrId,proxyRelation.psrTypeId);
}
},
params:{
'psrId'    :  record.data.id,
'psrTypeCode'  :  record.data.psrTypeCode,
'sourceSysId'  :  record.data.sourceSysId,
'sourcePsrId'  :  record.data.sourceId,
'symbol'    :  record.data.symbol,
'factor'    :  record.data.factor,
'abs'    :  record.data.abs
}
});
});
该grid有几个字段还要是可以编辑的,编辑后发到后台,所有用了EditGridpanel如果不需要编辑,用gridPanel也可以

下面是树的处理
this.tree = new Ext.tree.TreePanel({  
        split:true,
        region:'west',
        autoScroll:true,
animate:true,//开启动画效果
        enableDrop: true,  
        width : 189,
minSize : 100,
maxSize : 500,
        rootVisible:false,
        dropConfig:{
ddGroup: 'jldTreeDragDrop',// 从Grid到Tree。如果是Tree内部节点拖动,使用'jldTreeDragDrop'
dropAllowed: true
},
        loader: new Ext.tree.TreeLoader({  
            dataUrl:proxyRelation.psrTreeUrl 
        })  
    });
this.root = new Ext.tree.AsyncTreeNode({  
        text: '资源树',  
expanded :true,
draggable:false,
        id:'0' 
    });  
    this.tree.setRootNode(this.root);
    //动态加载树的访问定义
    this.tree.on('beforeload',function(node){
    return proxyRelation.queryTreeParamsParse(node,proxyRelation.tree,proxyRelation.psrTreeUrl);
    });
  /**
     * 处理树节点之间
     */
this.tree.on('beforenodedrop',function(e){ 
  var sourceNode=e.source.dragData.node;
  var targetNode=e.target;
  if(sourceNode.attributes.isPsr=='false'){
  disAlertInfo('源系统资源类型不能拖动');
  return false;
  }
  if(targetNode.attributes.isPsr=='false'){
  disAlertInfo('系统资源类型不能设置对应关系');
  return false;
  }
  var par1=targetNode.id.split('_');
  var TypeID=par1[0];
  var psrID=par1[1];
  var par2=sourceNode.id.split('_');
  var sourceTypeID=par2[0];
  var sourcePsrID=par2[1];
  //调用方法统一处理拖动至树或者拖动至网格事件
  return proxyRelation.checkPsrRelationAndSave(psrID,TypeID,proxyRelation.sourceSys,sourcePsrID,sourceTypeID,true);
});
分享到:
评论

相关推荐

    ExtJS4官方指南翻译:DragandDrop拖放/Grid组件/Tree组件/容器与布局

    Grid组件是ExtJS4中的一个核心组件,用于展示大量结构化的数据。它提供了一种可滚动、可分页的方式来显示数据,并支持排序、筛选、编辑等功能。Grid的每一行都可以视为一个记录,通过Store进行数据管理。开发者可以...

    Ext中拖拽Tree2Grid , 清空表格拖拽失效的解决办法>.<

    本文将深入探讨一个具体的使用场景——如何实现从Tree组件到Grid组件的拖拽功能,并解决在清空Grid后拖拽功能失效的问题。这个问题在实际开发中可能会遇到,尤其是在需要动态管理数据的界面中。 首先,EXTJS的Tree...

    前端开发Extjs入门-tree

    在前端开发领域,EXTJS是一个强大的JavaScript框架,用于构建富客户端应用。本教程将带你入门EXTJS中的Tree组件,Grid组件以及Window组件,并通过实际案例展示如何与后台SSM(Spring MVC, Spring, MyBatis)框架交互...

    extjs学习案例, 例子有 panel ,widow,tree,grid,form, store……

    ExtJS 是一个强大的JavaScript 框架,专用于构建富客户端Web应用。它提供了一整套组件化的用户界面元素,包括Panel、Window、Tree、Grid、Form和Store等,这些都是ExtJS的核心组件。本文将详细讲解这些知识点,帮助...

    Ext实现的拖拽树和表格之间的拖拽

    ExtJS是一个强大的JavaScript库,它提供了丰富的用户界面组件,包括可拖拽的元素,这使得在Web应用中创建动态和交互性的界面变得容易。 首先,让我们理解什么是ExtJS的Tree和Grid组件。Tree组件是用于展示层级结构...

    实现extjs4 的树、grid、form、query等大部分组件的功能

    在项目“bookSys”中,可能就是构建一个图书管理系统,用户可以通过树形结构浏览书籍分类,使用网格展示具体书籍信息,通过表单进行书籍的添加、修改和查询操作。 EXTJS4的灵活性和强大功能使其在企业级Web应用开发...

    extjs表格Grid比较全面的功能

    ExtJS表格Grid是一款强大的JavaScript组件,它在Web应用中用于展示和操作数据,尤其是在复杂的业务逻辑和大量数据处理中表现出色。这篇博客文章主要探讨了ExtJS Grid的全面功能,结合源码分析和实用工具,帮助开发者...

    extjs3.3 中文文档

    EXTJS 是一个流行的JavaScript库,专门用于构建富客户端Web应用程序。EXTJS 3.3是该框架的一个版本,它在2009年发布,带来了许多改进和新特性。中文文档对于中国开发者来说是一个非常宝贵的资源,因为它消除了语言...

    ext.net-extjs

    再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...

    extjs2.2.1

    再加上可编辑grid,添加新行,删除一或多行,提示多行数据,推拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件...

    EXTJS开发文档

    再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...

    EXTJS 3.3.1例子

     再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,啊,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格...

    extjs.3.0中文API

    ExtJS是一个广泛使用的JavaScript库,特别适用于构建富客户端应用程序。3.0版本是该库的一个重要里程碑,提供了许多功能和改进。这篇文档将详细介绍ExtJS 3.0的中文API,帮助开发者更好地理解和使用这个框架。 一、...

    ExtJS(ajax框架) 4.2.1

    再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...

    ExtJS 4.2.0

    再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...

    extjs4.0开发技术文档

    再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...

    基于s2sh+Extjs+dwr OA系统带全部JAR

    ssh2的oa系统简单的oa哦 ...可以把grid直接拖到tree,不同于其他的例子,拖动grid后会在tree中加一个叶子节点,大家试下就会明白。 自己练习用的哦,做的不好不要骂我,哪里不好希望大家包涵。

    EXTJS教材,教程

    在EXTJS教材和教程中,初学者会接触到EXTJS的核心组件之一——Grid Panel,这是一个功能强大的数据展示和操作工具。以下是对EXTJS Grid Panel的详细知识点解析: 1. **EXTJS Grid Panel的功能特性** - **丰富的...

    Extjs4.0视频教程和源代码,另附文档翻译

    - **Hello World程序**:通过一个简单的示例来展示如何快速搭建Extjs环境,并实现第一个应用。这通常包括创建HTML页面、引入Extjs库以及编写简单的JavaScript代码来显示一条消息。 ### Extjs4.0新特性 #### 第二讲...

    ExtJs实例代码

    再加上可编辑grid,添加新行,删除一或多行,提示多行数据,拖拽改变grid大小,grid之间拖拽一或多行,甚至可以在tree和grid之间进行拖拽,这些功能实在太神奇了。更令人惊叹的是,这些功能竟然都在ext表格控件里...

Global site tag (gtag.js) - Google Analytics