Extjs3.x 为GridPanel 排序行拖拽行数据上移行数据下移-优快云博客

本文介绍如何使用ExtJS的GridPanel组件实现行数据的上移和下移功能，通过删除并重新插入记录的方式达到视觉上的排序效果，并提供了一个包含菜单项、行选择和拖放操作的具体实现示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要实现gridPanel行数据排序，思路是：删除选中行的数据，在移动行插入新数据，形成移动的假象。

var Menu = new Ext.menu.Menu({
        items: [{
            text: '上移',
			iconCls: 'arrow-upon-icon', 
            handler: function(){
				if(rowIndex == 0) {
					return;
				}
				var data = grid.store.data.items[rowIndex].data;
				var record = new Ext.data.Record({
					Id:data.Id,
					name: data.name,
					type: data.type,
					remarks:data.remarks
				});
				grid.getStore().removeAt(rowIndex); 
				grid.getStore().insert(rowIndex - 1, record); 
				grid.getSelectionModel().selectRow(rowIndex - 1); 
				grid.getView().refresh();		
			},
            scope: this
        },
        {
            text: '下移',
			iconCls: 'arrow-downward-icon', 
            handler: function(){
				if(rowIndex < grid.getStore().getCount() - 1){
					var data = grid.store.data.items[rowIndex].data;
					var record = new Ext.data.Record({
						Id:data.Id,
						name: data.name,
						type: data.type,
						remarks:data.remarks
					});
					grid.getStore().removeAt(rowIndex); 
					grid.getStore().insert(rowIndex + 1, record); 
					grid.getSelectionModel().selectRow(rowIndex + 1); 
					grid.getView().refresh();		
				}
			},
            scope: this
        }]
    });
	var grid = new Ext.grid.GridPanel({
		autoScroll: true,
		border: false,
		loadMask: true,
		enableDragDrop:true,//激活行拖动
		ddGroup: 'gridDD',
		dropConfig: {appendOnly:false},
		store: {},
		columns: [
		    new Ext.grid.RowNumberer(),
			{ header: '编号', dataIndex: 'Id', width: 200,hidden:true},
			{ header: '名称', dataIndex: 'name', width: 200, sortable: true},
		    { header: '类型', dataIndex: 'type', width: 100},
		    { header: '备注', dataIndex: 'remarks', width: 300}
		],
		listeners: {
			rowdblclick: function(grid, rowIndex, event) {
				
			},
			contextmenu:function(e){
				var target = e.getTarget(); 
				e.stopEvent() ;
				Menu.showAt(e.getXY());
				var view = grid.getView();
				rowIndex = view.findRowIndex(target);
				grid.getSelectionModel().selectRow(rowIndex);
			}
		}
	});

//GridPanel已渲染后才执行这段
	var ddrow = new Ext.dd.DropTarget(grid.getEl(), {
        ddGroup: 'gridDD',
		copy    : false,
		notifyDrop: function (dd, e, data) {
            //只有一行数据时，不需要拖动排序
		    if (rowIndexs == 0) {
		        return;
		    }
			//选择行
            var rows = grid.getSelectionModel().getSelections();
			//选择行数
            var count = rows.length;
			//拖动到几行
            var dropIndex = dd.getDragData(e).rowIndex;
            var array=[];
            for(var i=0;i<count;i++){
                var index = dropIndex+i;
                array.push(index);
            }
            grid.getStore().remove(grid.getStore().getById(data.selections[0].id));
            grid.getStore().insert(dropIndex,data.selections); 
            grid.getSelectionModel().selectRows(array); 
			grid.getView().refresh(); 	
        }
    });