欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Extjs3.x 为GridPanel 排序 行拖拽 行数据上移 行数据下移

程序员文章站 2023-12-26 13:57:45
...

需要实现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);
			}
		}
	});

Extjs3.x 为GridPanel 排序 行拖拽 行数据上移 行数据下移
//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(); 	
        }
    });
    

Extjs3.x 为GridPanel 排序 行拖拽 行数据上移 行数据下移

上一篇:

下一篇: