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