Drag and Drop from Grid to Grid Example，增加上下、左右移动的功能。
2014-02-13 10:14
531 查看
版本：extjs 2.3.0
需求：自定义可排序列选择。
例子：http://localhost/ext230/examples/dd/dnd_grid_to_grid.html
封装：暂无，给大家参考下。
效果如图1所示。
图1
c.html：
[html] view
plaincopy
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="./js/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="./js/extjs/ext-base.js"></script>
<script type="text/javascript" src="./js/extjs/ext-all.js"></script>
<script type="text/javascript" src="c.js"></script>
</head>
<body>
<h1>Drag and Drop from Grid to Grid Example</h1>
<p>This example shows how to setup two way drag and drop from one GridPanel to another.</p>
<p>Note that the js is not minified so it is readable. See <a href="dnd_grid_to_grid.js">dnd_grid_to_grid.js</a>.</p>
<div id="panel"></div>
</body>
</html>
c.js
[javascript] view
plaincopy
/*
* Ext JS Library 2.3.0
* Copyright(c) 2006-2009, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();
var myData = {
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" }
]
};
// Generic fields array to use in both store defs.
var fields = [
{name: 'name', mapping : 'name'},
{name: 'column1', mapping : 'column1'},
{name: 'column2', mapping : 'column2'}
];
// create the data store
var firstGridStore = new Ext.data.JsonStore({
fields : fields,
data : myData,
root : 'records'
});
// Column Model shortcut array
var cols = [
{ 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'}
];
// declare the source Grid
var firstGrid = new Ext.grid.GridPanel({
ddGroup : 'secondGridDDGroup',
store : firstGridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'name',
//width : 325,
height : 272,
columnWidth:0.4,
//region : 'west',
title : '待选择列'
});
var secondGridStore = new Ext.data.JsonStore({
fields : fields,
root : 'records'
});
// create the destination Grid
var secondGrid = new Ext.grid.GridPanel({
ddGroup : 'firstGridDDGroup',
store : secondGridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'name',
height : 272,
columnWidth:0.4,
title : '已选择列'
});
var lrPanel = {
columnWidth:0.1,
height : 300,
items : [
new Ext.Button({
text:"> ",
style: 'margin: 70px 0px 0px 15px',
handler : function() {
if (firstGrid.getSelectionModel().hasSelection())
{
// 数据行数
var total = secondGridStore.getCount();
var records = firstGrid.getSelectionModel().getSelections();
for (var i = 0; i < records.length; i++) {
var record = records[i];
firstGridStore.remove(record);
secondGridStore.insert(total + i, record);
}
}
}
}),
new Ext.Button({
text:">>",
style: 'margin: 15px 0px 0px 15px',
handler : function() {
// 数据行数
var total = secondGridStore.getCount();
var i = 0;
while (firstGridStore.getCount() > 0)
{
var record = firstGridStore.getAt(0);
firstGridStore.remove(record);
secondGridStore.insert(total + i, record);
i ++;
}
}
}),
new Ext.Button({
text:" <",
style: 'margin: 15px 0px 0px 15px',
handler : function() {
if (secondGrid.getSelectionModel().hasSelection())
{
// 数据行数
var total = firstGridStore.getCount();
var records = secondGrid.getSelectionModel().getSelections();
for (var i = 0; i < records.length; i++) {
var record = records[i];
secondGridStore.remove(record);
firstGridStore.insert(total + i, record);
}
}
}
}),
new Ext.Button({
text:"<<",
style: 'margin: 15px 0px 0px 15px',
handler : function() {
// 数据行数
var total = firstGridStore.getCount();
var i = 0;
while (secondGridStore.getCount() > 0)
{
var record = secondGridStore.getAt(0);
secondGridStore.remove(record);
firstGridStore.insert(total + i, record);
i ++;
}
}
})
]
};
var udPanel = {
columnWidth:0.1,
height : 300,
items : [
new Ext.Button({
text:"向上",
style: 'margin: 90px 0px 0px 10px',
handler : function() {
if (secondGrid.getSelectionModel().hasSelection())
{
var record = secondGrid.getSelectionModel().getSelected();
//数据行数
var total = secondGridStore.getCount();
for(var i=0; i < total - 1; i++){
var temp = secondGridStore.getAt(i);
if (temp.get('name') == record.get('name'))
{
break;
}
var next = secondGridStore.getAt(i + 1);
if (next.get('name') == record.get('name'))
{
secondGridStore.remove(next);
secondGridStore.insert(i, next);
}
}
}
}
}),
new Ext.Button({
text:"向下",
style: 'margin: 15px 0px 0px 10px',
handler : function() {
if (secondGrid.getSelectionModel().hasSelection())
{
var record = secondGrid.getSelectionModel().getSelected();
//数据行数
var total = secondGridStore.getCount();
for(var i=0; i < total - 1; i++){
var next = secondGridStore.getAt(i);
if (next.get('name') == record.get('name'))
{
secondGridStore.remove(next);
secondGridStore.insert(i + 1, next);
}
}
}
}
})
]
};
//Simple 'border layout' panel to house both grids
var displayPanel = new Ext.Panel({
width : 650,
height : 300,
//layout : 'border',
layout : 'column',
renderTo : 'panel',
items : [
firstGrid,
lrPanel,
secondGrid,
udPanel
],
bbar : [
'->', // Fill
{
text : '确定',
handler : function() {
// 数据行数
var total = secondGridStore.getCount();
var results = "";
if (total > 0)
{
for (var i = 0; i < total; i ++)
{
var record = secondGridStore.getAt(i);
results += record.get("name") + ",";
}
results = results.substring(0, results.length - 1);
}
alert("选择的列名称：" + results);
}
},
{
text : '重置',
handler : function() {
//refresh source grid
firstGridStore.loadData(myData);
//purge destination grid
secondGridStore.removeAll();
}
}
]
});
// 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 firstGridDropTargetEl = firstGrid.getView().el.dom.childNodes[0].childNodes[1];
var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
ddGroup : 'firstGridDDGroup',
copy : true,
notifyDrop : function(ddSource, e, data){
// Generic function to add records.
function addRow(record, index, allItems) {
// Search for duplicates
var foundItem = firstGridStore.find('name', record.data.name);
// if not found
if (foundItem == -1) {
firstGridStore.add(record);
// Call a sort dynamically
//firstGridStore.sort('name', 'ASC');
//Remove Record from the source
ddSource.grid.store.remove(record);
}
}
// Loop through the selections
Ext.each(ddSource.dragData.selections ,addRow);
return(true);
}
});
// This will make sure we only drop to the view container
var secondGridDropTargetEl = secondGrid.getView().el.dom.childNodes[0].childNodes[1]
var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
ddGroup : 'secondGridDDGroup',
copy : false,
notifyDrop : function(ddSource, e, data){
// Generic function to add records.
function addRow(record, index, allItems) {
// Search for duplicates
var foundItem = secondGridStore.find('name', record.data.name);
// if not found
if (foundItem == -1) {
secondGridStore.add(record);
// Call a sort dynamically
//secondGridStore.sort('name', 'ASC');
//Remove Record from the source
ddSource.grid.store.remove(record);
}
}
// Loop through the selections
Ext.each(ddSource.dragData.selections ,addRow);
return(true);
}
});
});
需求：自定义可排序列选择。
例子：http://localhost/ext230/examples/dd/dnd_grid_to_grid.html
封装：暂无，给大家参考下。
效果如图1所示。
图1
c.html：
[html] view
plaincopy
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="./js/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="./js/extjs/ext-base.js"></script>
<script type="text/javascript" src="./js/extjs/ext-all.js"></script>
<script type="text/javascript" src="c.js"></script>
</head>
<body>
<h1>Drag and Drop from Grid to Grid Example</h1>
<p>This example shows how to setup two way drag and drop from one GridPanel to another.</p>
<p>Note that the js is not minified so it is readable. See <a href="dnd_grid_to_grid.js">dnd_grid_to_grid.js</a>.</p>
<div id="panel"></div>
</body>
</html>
c.js
[javascript] view
plaincopy
/*
* Ext JS Library 2.3.0
* Copyright(c) 2006-2009, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();
var myData = {
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" }
]
};
// Generic fields array to use in both store defs.
var fields = [
{name: 'name', mapping : 'name'},
{name: 'column1', mapping : 'column1'},
{name: 'column2', mapping : 'column2'}
];
// create the data store
var firstGridStore = new Ext.data.JsonStore({
fields : fields,
data : myData,
root : 'records'
});
// Column Model shortcut array
var cols = [
{ 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'}
];
// declare the source Grid
var firstGrid = new Ext.grid.GridPanel({
ddGroup : 'secondGridDDGroup',
store : firstGridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'name',
//width : 325,
height : 272,
columnWidth:0.4,
//region : 'west',
title : '待选择列'
});
var secondGridStore = new Ext.data.JsonStore({
fields : fields,
root : 'records'
});
// create the destination Grid
var secondGrid = new Ext.grid.GridPanel({
ddGroup : 'firstGridDDGroup',
store : secondGridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'name',
height : 272,
columnWidth:0.4,
title : '已选择列'
});
var lrPanel = {
columnWidth:0.1,
height : 300,
items : [
new Ext.Button({
text:"> ",
style: 'margin: 70px 0px 0px 15px',
handler : function() {
if (firstGrid.getSelectionModel().hasSelection())
{
// 数据行数
var total = secondGridStore.getCount();
var records = firstGrid.getSelectionModel().getSelections();
for (var i = 0; i < records.length; i++) {
var record = records[i];
firstGridStore.remove(record);
secondGridStore.insert(total + i, record);
}
}
}
}),
new Ext.Button({
text:">>",
style: 'margin: 15px 0px 0px 15px',
handler : function() {
// 数据行数
var total = secondGridStore.getCount();
var i = 0;
while (firstGridStore.getCount() > 0)
{
var record = firstGridStore.getAt(0);
firstGridStore.remove(record);
secondGridStore.insert(total + i, record);
i ++;
}
}
}),
new Ext.Button({
text:" <",
style: 'margin: 15px 0px 0px 15px',
handler : function() {
if (secondGrid.getSelectionModel().hasSelection())
{
// 数据行数
var total = firstGridStore.getCount();
var records = secondGrid.getSelectionModel().getSelections();
for (var i = 0; i < records.length; i++) {
var record = records[i];
secondGridStore.remove(record);
firstGridStore.insert(total + i, record);
}
}
}
}),
new Ext.Button({
text:"<<",
style: 'margin: 15px 0px 0px 15px',
handler : function() {
// 数据行数
var total = firstGridStore.getCount();
var i = 0;
while (secondGridStore.getCount() > 0)
{
var record = secondGridStore.getAt(0);
secondGridStore.remove(record);
firstGridStore.insert(total + i, record);
i ++;
}
}
})
]
};
var udPanel = {
columnWidth:0.1,
height : 300,
items : [
new Ext.Button({
text:"向上",
style: 'margin: 90px 0px 0px 10px',
handler : function() {
if (secondGrid.getSelectionModel().hasSelection())
{
var record = secondGrid.getSelectionModel().getSelected();
//数据行数
var total = secondGridStore.getCount();
for(var i=0; i < total - 1; i++){
var temp = secondGridStore.getAt(i);
if (temp.get('name') == record.get('name'))
{
break;
}
var next = secondGridStore.getAt(i + 1);
if (next.get('name') == record.get('name'))
{
secondGridStore.remove(next);
secondGridStore.insert(i, next);
}
}
}
}
}),
new Ext.Button({
text:"向下",
style: 'margin: 15px 0px 0px 10px',
handler : function() {
if (secondGrid.getSelectionModel().hasSelection())
{
var record = secondGrid.getSelectionModel().getSelected();
//数据行数
var total = secondGridStore.getCount();
for(var i=0; i < total - 1; i++){
var next = secondGridStore.getAt(i);
if (next.get('name') == record.get('name'))
{
secondGridStore.remove(next);
secondGridStore.insert(i + 1, next);
}
}
}
}
})
]
};
//Simple 'border layout' panel to house both grids
var displayPanel = new Ext.Panel({
width : 650,
height : 300,
//layout : 'border',
layout : 'column',
renderTo : 'panel',
items : [
firstGrid,
lrPanel,
secondGrid,
udPanel
],
bbar : [
'->', // Fill
{
text : '确定',
handler : function() {
// 数据行数
var total = secondGridStore.getCount();
var results = "";
if (total > 0)
{
for (var i = 0; i < total; i ++)
{
var record = secondGridStore.getAt(i);
results += record.get("name") + ",";
}
results = results.substring(0, results.length - 1);
}
alert("选择的列名称：" + results);
}
},
{
text : '重置',
handler : function() {
//refresh source grid
firstGridStore.loadData(myData);
//purge destination grid
secondGridStore.removeAll();
}
}
]
});
// 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 firstGridDropTargetEl = firstGrid.getView().el.dom.childNodes[0].childNodes[1];
var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
ddGroup : 'firstGridDDGroup',
copy : true,
notifyDrop : function(ddSource, e, data){
// Generic function to add records.
function addRow(record, index, allItems) {
// Search for duplicates
var foundItem = firstGridStore.find('name', record.data.name);
// if not found
if (foundItem == -1) {
firstGridStore.add(record);
// Call a sort dynamically
//firstGridStore.sort('name', 'ASC');
//Remove Record from the source
ddSource.grid.store.remove(record);
}
}
// Loop through the selections
Ext.each(ddSource.dragData.selections ,addRow);
return(true);
}
});
// This will make sure we only drop to the view container
var secondGridDropTargetEl = secondGrid.getView().el.dom.childNodes[0].childNodes[1]
var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
ddGroup : 'secondGridDDGroup',
copy : false,
notifyDrop : function(ddSource, e, data){
// Generic function to add records.
function addRow(record, index, allItems) {
// Search for duplicates
var foundItem = secondGridStore.find('name', record.data.name);
// if not found
if (foundItem == -1) {
secondGridStore.add(record);
// Call a sort dynamically
//secondGridStore.sort('name', 'ASC');
//Remove Record from the source
ddSource.grid.store.remove(record);
}
}
// Loop through the selections
Ext.each(ddSource.dragData.selections ,addRow);
return(true);
}
});
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Drag and Drop from Grid to Grid Example，增加上下、左右移动的功能。
- 使用javascript操作多选列表框，实现动态增加删除，左右移动，上下排序移动等功能。
- 【转】Drag and Drop files from Windows Explorer toWindows Form
- How to implement Drag and Drop from managed WinForm to Explorer
- Flex官方快速入门教程翻译之19.Adding_Drag_and_Drop增加拖放功能
- 利用键盘上的上下左右（回车）键模拟出tab 键的功能上下左右移动焦点
- How To Build Multi-control Components when Inheriting from an Existing Control (Intro and TextBox Example)
- Drag and Drop Products to the Shopping Basket Using JavaScript
- RCP：拖拽功能的实现 Drag and Drop
- 让你的控件也具有拖拽（drag-and-drop）功能
- Qt Drag and Drop Puzzle Example 看看看~
- 【自定义控件】让你的控件也具有拖拽（drag-and-drop）功能 详细版
- [RxJS] Drag and Drop example
- ArcEngine中使用上下左右键移动地图功能的实现
- API Guides（六）—— Create a Search Interface To Drag and Drop
- rad grid, drag and drop
- Drag & Drop - From List to VideoDisplay
- Javascript, How to make a Dress Up Game (Drag and Drop)
- Unity3D-UGUI-drag and drop实现拖拽放下功能
- Javascript 利用键盘上的上下左右（回车）键模拟出tab 键的功能上下左右移动焦点