Extjs中grid行的上移和下移

最新推荐文章于 2023-02-25 20:31:22 发布

weixin_30764771

最新推荐文章于 2023-02-25 20:31:22 发布

阅读量436

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/h07061108/p/extjs_grid_up_down.html

本文介绍了使用ExtJS实现Grid中行的上移和下移功能的两种方法：一是通过Up和Down按钮进行操作；二是利用拖拽功能实现行位置变动。提供了具体的代码实现方式。

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

一、将up和down按钮放到tbar中,然后选中grid行即可实现上移和下移

 1 var up = new Ext.Action({
 2     text : 'Up',
 3     icon : 'up.png',//或者添加样式iconCls
 4     disabled : true,
 5     handler : function() {
 6         var record = grid.getSelectionModel().getSelected();
 7         if (record) {
 8             var index = grid.store.indexOf(record);
 9             if (index > 0) {
10                 grid.store.removeAt(index);
11                 grid.store.insert(index - 1, record);
12                 grid.getView().refresh(); // refesh the row number
13                 grid.getSelectionModel().selectRow(index - 1);
14             }
15         } else {
16             Ext.Msg.alert('Warning', 'Please select one item!');
17         }
18     }
19 });
20 
21 var down = new Ext.Action({
22     text : 'Down',
23     icon : 'down.png',//或者添加样式iconCls
24     disabled : true,
25     handler : function() {
26         var record = grid.getSelectionModel().getSelected();
27         if (record) {
28             var index = grid.store.indexOf(record);
29             if (index < grid.store.getCount() - 1) {
30                 grid.store.removeAt(index);
31                 grid.store.insert(index + 1, record);
32                 grid.getView().refresh(); // refesh the row number
33                 grid.getSelectionModel().selectRow(index + 1);
34             }
35         } else {
36             Ext.Msg.alert('Warning', 'Please select one item!');
37         }
38     }
39 });

二、grid行的拖动实现上移和下移

 1 var grid = new Ext.grid.GridPanel({
 2     layout : 'fit',
 3     loadMask : true,
 4     enableDragDrop : true,
 5     ddGroup: "GridDD",
 6     viewConfig : {
 7         forceFit : true,
 8         enableRowBody : true,
 9         showPreview : true,
10         cls:"x-grid-empty",
11         emptyText:  _('ID_NO_RECORDS_FOUND')
12     },
13     listeners : {
14         'afterrender' : function() {
15             var ddrow = new Ext.dd.DropTarget(grid.container, {  
16                 ddGroup : 'GridDD',  
17                 copy    : false,  
18                 notifyDrop : function(dd, e, data) {  
19                     var rows = data.selections;  
20                     var index = dd.getDragData(e).rowIndex;   
21                     if(typeof(index) == "undefined") return;  
22                     for(i = 0; i < rows.length; i++) {  
23                         if(!this.copy) {
24                             grid.getStore().remove(rows[i]);  
25                             grid.getStore().insert(index, rows[i]);  
26                             grid.view.refresh();
27                         }
28                     }  
29                 }
30             }); 
31         }
32     }
33 });