Extjs4的grid列中加上操作的按钮，点击没有选择该行的处理方法

最新推荐文章于 2022-07-09 11:01:47 发布

小新8

最新推荐文章于 2022-07-09 11:01:47 发布

阅读量2.6k

点赞数

分类专栏： extjs4 文章标签： extjs4 java

本文链接：https://blog.csdn.net/u011439289/article/details/26366967

版权

extjs4 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在grid设置中，如果按照以下代码来编写：

{xtype:'actioncolumn', align:'center',altText:'删除',tooltip:'删除',iconCls:'delete', handler:function(){
                Ext.Msg.confirm("警告","是否真的要删除",function(btn){
                   if (btn == 'yes'){
                      var row = roomgridpanel.getSelectionModel().getSelection();
                      console.log(row[0]);
                  }
               	});
　　}
}

设置一个删除功能，点击该行图标，控制台会有undefined的显示，随便点击一行，也就是选中了该行，再点击，控制台会有显示了，可是显示的数据并不一定是你点击图标所在的那一行，而是先前点击选中的那一行！这样就起不到对该行进行操作的目的了！

解决方法就是改成如下代码：

{
            xtype:'actioncolumn', align:'center',text:'操作',
            items:[
                { altText:'删除',tooltip:'删除', icon:'public/images/delete.png',
                    handler:function(view,row,col,item,e){
                        var record = view.getStore().getAt(row);
                        console.log(record.raw);
                    }
                }
            ]
}

点击图标的同时也选中了对该行的操作！

下一步就是从中取出该行id，传到后台进行删除或者什么其他操作都可以了！

更具体的代码：

{
            xtype:'actioncolumn', align:'center',text:'操作',//iconCls:'delete',
            items:[
                { altText:'删除',tooltip:'删除', icon:'public/images/delete.png',
                    handler:function(view,row,col,item,e){
                        Ext.Msg.confirm("警告","是否真的要删除",function(btn){
                            if (btn == 'yes'){
                                var record = view.getStore().getAt(row);
                                var roid = record.raw.roid;
                                
                                Ext.Ajax.request({
                                    method:'post',
                                    params:{roid:roid},
                                    url:'room/delete',
                                    success: function (result) {
                                        var jsonString = Ext.JSON.decode(result.responseText);
                                        Ext.Msg.alert('成功', jsonString.msg);
                                        //删除后刷新
                                        roomStore.remove(record);
                                        //roomStore.load({params:{start:0,limit:15}});
                                    },
                                    failure: function (result) {
                                        var jsonString = Ext.JSON.decode(result.responseText);
                                        Ext.Msg.alert('失败', jsonString.msg);
                                    }
                                });
                            }
                        });
                    }
                }
            ]
}

删除后，可以重载一下Store，以更新表格数据，但是这样要向后台数据库发送一次请求，给服务器造成不必要的负担，实在没有这个必要，用remove方法（roomStore.remove(record)）就可以了，反正数据都已经删了，remove掉，和重载差不多，不好的是如果没有删除成功，remove后再刷新，数据又回来了，别人还以为真的删除了呢！给个提示应该就好！