Drag and Drop from Grid to Grid Example，增加上下、左右移动的功能。

最新推荐文章于 2024-09-14 18:52:56 发布

LzwGlory

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量186

点赞数

文章标签： javascript ViewUI

版本：extjs 2.3.0

需求：自定义可排序列选择。

例子：http://localhost/ext230/examples/dd/dnd_grid_to_grid.html

封装：暂无，给大家参考下。

效果如图1所示。

图1

c.html：

[html]view plaincopy 
   
 <html> 
 <head> 
 <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/> 
 <title>test</title> 
  
 <linkrel="stylesheet"type="text/css"href="./js/extjs/resources/css/ext-all.css"/> 
  
  
 <scripttype="text/javascript"src="./js/extjs/ext-base.js"></script> 
  
 <scripttype="text/javascript"src="./js/extjs/ext-all.js"></script> 
  
 <scripttype="text/javascript"src="c.js"></script> 
  
 </head> 
 <body> 
  
  
 <h1>DragandDropfromGridtoGridExample</h1> 
 <p>ThisexampleshowshowtosetuptwowaydraganddropfromoneGridPaneltoanother.</p> 
 <p>Notethatthejsisnotminifiedsoitisreadable.See<ahref="dnd_grid_to_grid.js">dnd_grid_to_grid.js</a>.</p> 
 <divid="panel"></div> 
  
  
 </body> 
 </html> 

c.js

[javascript]view plaincopy 
   
 /* 
 *ExtJSLibrary2.3.0 
 *Copyright(c)2006-2009,ExtJS,LLC. 
 *licensing@extjs.com 
 * 
 *http://extjs.com/license 
 */ 
  
 Ext.onReady(function(){ 
 Ext.QuickTips.init(); 
  
  
 varmyData={ 
 records:[ 
 {name:"名称0",column1:"0",column2:"0"}, 
 {name:"名称1",column1:"1",column2:"1"}, 
 {name:"名称2",column1:"2",column2:"2"}, 
 {name:"名称3",column1:"3",column2:"3"}, 
 {name:"名称4",column1:"4",column2:"4"}, 
 {name:"名称5",column1:"5",column2:"5"}, 
 {name:"名称6",column1:"6",column2:"6"}, 
 {name:"名称7",column1:"7",column2:"7"}, 
 {name:"名称8",column1:"8",column2:"8"}, 
 {name:"名称9",column1:"9",column2:"9"}, 
 {name:"名称10",column1:"9",column2:"9"}, 
 {name:"名称11",column1:"9",column2:"9"}, 
 {name:"名称12",column1:"9",column2:"9"}, 
 {name:"名称13",column1:"9",column2:"9"}, 
 {name:"名称14",column1:"9",column2:"9"}, 
 {name:"名称15",column1:"9",column2:"9"}, 
 {name:"名称16",column1:"9",column2:"9"}, 
 {name:"名称17",column1:"9",column2:"9"}, 
 {name:"名称18",column1:"9",column2:"9"}, 
 {name:"名称19",column1:"9",column2:"9"} 
 ] 
 }; 
  
  
 //Genericfieldsarraytouseinbothstoredefs. 
 varfields=[ 
 {name:'name',mapping:'name'}, 
 {name:'column1',mapping:'column1'}, 
 {name:'column2',mapping:'column2'} 
 ]; 
  
 //createthedatastore 
 varfirstGridStore=newExt.data.JsonStore({ 
 fields:fields, 
 data:myData, 
 root:'records' 
 }); 
  
  
 //ColumnModelshortcutarray 
 varcols=[ 
 {id:'name',header:"列名称", 
 //width:160, 
 sortable:true, 
 dataIndex:'name' 
 }//, 
 //{header:"column1",width:50,sortable:true,dataIndex:'column1'}, 
 //{header:"column2",width:50,sortable:true,dataIndex:'column2'} 
 ]; 
  
 //declarethesourceGrid 
 varfirstGrid=newExt.grid.GridPanel({ 
 ddGroup:'secondGridDDGroup', 
 store:firstGridStore, 
 columns:cols, 
 enableDragDrop:true, 
 stripeRows:true, 
 autoExpandColumn:'name', 
 //width:325, 
 height:272, 
 columnWidth:0.4, 
 //region:'west', 
 title:'待选择列' 
 }); 
  
 varsecondGridStore=newExt.data.JsonStore({ 
 fields:fields, 
 root:'records' 
 }); 
  
 //createthedestinationGrid 
 varsecondGrid=newExt.grid.GridPanel({ 
 ddGroup:'firstGridDDGroup', 
 store:secondGridStore, 
 columns:cols, 
 enableDragDrop:true, 
 stripeRows:true, 
 autoExpandColumn:'name', 
 height:272, 
 columnWidth:0.4, 
 title:'已选择列' 
 }); 
  
 varlrPanel={ 
 columnWidth:0.1, 
 height:300, 
  
 items:[ 
 newExt.Button({ 
 text:">", 
 style:'margin:70px0px0px15px', 
 handler:function(){ 
 if(firstGrid.getSelectionModel().hasSelection()) 
 { 
 //数据行数 
 vartotal=secondGridStore.getCount(); 
 varrecords=firstGrid.getSelectionModel().getSelections(); 
 for(vari=0;i<records.length;i++){ 
 varrecord=records[i]; 
 firstGridStore.remove(record); 
 secondGridStore.insert(total+i,record); 
 } 
 } 
 } 
 }), 
 newExt.Button({ 
 text:">>", 
 style:'margin:15px0px0px15px', 
 handler:function(){ 
 //数据行数 
 vartotal=secondGridStore.getCount(); 
 vari=0; 
 while(firstGridStore.getCount()>0) 
 { 
 varrecord=firstGridStore.getAt(0); 
 firstGridStore.remove(record); 
 secondGridStore.insert(total+i,record); 
 i++; 
 } 
 } 
 }), 
 newExt.Button({ 
 text:"<", 
 style:'margin:15px0px0px15px', 
 handler:function(){ 
 if(secondGrid.getSelectionModel().hasSelection()) 
 { 
 //数据行数 
 vartotal=firstGridStore.getCount(); 
 varrecords=secondGrid.getSelectionModel().getSelections(); 
 for(vari=0;i<records.length;i++){ 
 varrecord=records[i]; 
 secondGridStore.remove(record); 
 firstGridStore.insert(total+i,record); 
 } 
 } 
 } 
 }), 
 newExt.Button({ 
 text:"<<", 
 style:'margin:15px0px0px15px', 
 handler:function(){ 
 //数据行数 
 vartotal=firstGridStore.getCount(); 
 vari=0; 
 while(secondGridStore.getCount()>0) 
 { 
 varrecord=secondGridStore.getAt(0); 
 secondGridStore.remove(record); 
 firstGridStore.insert(total+i,record); 
 i++; 
 } 
 } 
 }) 
 ] 
 }; 
  
 varudPanel={ 
 columnWidth:0.1, 
 height:300, 
 items:[ 
 newExt.Button({ 
 text:"向上", 
 style:'margin:90px0px0px10px', 
 handler:function(){ 
 if(secondGrid.getSelectionModel().hasSelection()) 
 { 
 varrecord=secondGrid.getSelectionModel().getSelected(); 
 //数据行数 
 vartotal=secondGridStore.getCount(); 
 for(vari=0;i<total-1;i++){ 
 vartemp=secondGridStore.getAt(i); 
 if(temp.get('name')==record.get('name')) 
 { 
 break; 
 } 
 varnext=secondGridStore.getAt(i+1); 
 if(next.get('name')==record.get('name')) 
 { 
 secondGridStore.remove(next); 
 secondGridStore.insert(i,next); 
 } 
 } 
 } 
 } 
 }), 
 newExt.Button({ 
 text:"向下", 
 style:'margin:15px0px0px10px', 
 handler:function(){ 
 if(secondGrid.getSelectionModel().hasSelection()) 
 { 
 varrecord=secondGrid.getSelectionModel().getSelected(); 
 //数据行数 
 vartotal=secondGridStore.getCount(); 
 for(vari=0;i<total-1;i++){ 
 varnext=secondGridStore.getAt(i); 
 if(next.get('name')==record.get('name')) 
 { 
 secondGridStore.remove(next); 
 secondGridStore.insert(i+1,next); 
 } 
 } 
 } 
 } 
 }) 
 ] 
 }; 
  
  
 //Simple'borderlayout'paneltohousebothgrids 
 vardisplayPanel=newExt.Panel({ 
 width:650, 
 height:300, 
 //layout:'border', 
 layout:'column', 
 renderTo:'panel', 
 items:[ 
 firstGrid, 
 lrPanel, 
 secondGrid, 
 udPanel 
 ], 
 bbar:[ 
 '->',//Fill 
 { 
 text:'确定', 
 handler:function(){ 
 //数据行数 
 vartotal=secondGridStore.getCount(); 
 varresults=""; 
 if(total>0) 
 { 
 for(vari=0;i<total;i++) 
 { 
 varrecord=secondGridStore.getAt(i); 
 results+=record.get("name")+","; 
 } 
 results=results.substring(0,results.length-1); 
 } 
 alert("选择的列名称："+results); 
 } 
 }, 
 { 
 text:'重置', 
 handler:function(){ 
 //refreshsourcegrid 
 firstGridStore.loadData(myData); 
  
 //purgedestinationgrid 
 secondGridStore.removeAll(); 
 } 
 } 
 ] 
 }); 
  
 //usedtoaddrecordstothedestinationstores 
 varblankRecord=Ext.data.Record.create(fields); 
  
 /**** 
 *SetupDropTargets 
 ***/ 
 //Thiswillmakesureweonlydroptotheviewcontainer 
 varfirstGridDropTargetEl=firstGrid.getView().el.dom.childNodes[0].childNodes[1]; 
 varfirstGridDropTarget=newExt.dd.DropTarget(firstGridDropTargetEl,{ 
 ddGroup:'firstGridDDGroup', 
 copy:true, 
 notifyDrop:function(ddSource,e,data){ 
  
 //Genericfunctiontoaddrecords. 
 functionaddRow(record,index,allItems){ 
  
 //Searchforduplicates 
 varfoundItem=firstGridStore.find('name',record.data.name); 
 //ifnotfound 
 if(foundItem==-1){ 
 firstGridStore.add(record); 
  
 //Callasortdynamically 
 //firstGridStore.sort('name','ASC'); 
  
 //RemoveRecordfromthesource 
 ddSource.grid.store.remove(record); 
 } 
 } 
  
 //Loopthroughtheselections 
 Ext.each(ddSource.dragData.selections,addRow); 
 return(true); 
 } 
 }); 
  
  
 //Thiswillmakesureweonlydroptotheviewcontainer 
 varsecondGridDropTargetEl=secondGrid.getView().el.dom.childNodes[0].childNodes[1] 
  
 vardestGridDropTarget=newExt.dd.DropTarget(secondGridDropTargetEl,{ 
 ddGroup:'secondGridDDGroup', 
 copy:false, 
 notifyDrop:function(ddSource,e,data){ 
  
 //Genericfunctiontoaddrecords. 
 functionaddRow(record,index,allItems){ 
  
 //Searchforduplicates 
 varfoundItem=secondGridStore.find('name',record.data.name); 
 //ifnotfound 
 if(foundItem==-1){ 
 secondGridStore.add(record); 
 //Callasortdynamically 
 //secondGridStore.sort('name','ASC'); 
  
 //RemoveRecordfromthesource 
 ddSource.grid.store.remove(record); 
 } 
 } 
 //Loopthroughtheselections 
 Ext.each(ddSource.dragData.selections,addRow); 
 return(true); 
 } 
 }); 
 });  