当前位置:编程学习 > JS >>

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

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

[javascript]
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(); 
     &n

补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,