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

最新推荐文章于 2023-11-13 18:32:49 发布

rootcn

最新推荐文章于 2023-11-13 18:32:49 发布

阅读量1.3k

点赞数

分类专栏：脚本语言 Web 文章标签： function licensing stylesheet header border search

本文链接：https://blog.csdn.net/rootcn/article/details/6969158

版权

Web 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

脚本语言

13 篇文章 0 订阅

订阅专栏

版本：extjs 2.3.0

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

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

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

效果如图1所示。

图1

c.html：

<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

/*
 * 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);
		}
	}); 
});

rootcn

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Drag and Drop from Grid to Grid Example，增加上下、左右移动的功能。

版本：extjs 2.3.0需求：自定义可排序列选择。例子：http://localhost/ext230/examples/dd/dnd_grid_to_grid.html封装：暂无，给大家参考下。效果如图1所示。图1c.html： test Drag and Drop
复制链接

扫一扫