jquery-easyui中datagrid的單擊刪除此行

最近在easyui的項目開發，easyui封裝了許多方法，用起來很方便，但同時也遇到了不少的問題。

如果在datagrid中直接將index傳給easyui自帶的deletRow方法來刪除當前點擊行，一開始並沒有問題，但是當連續刪除的時候就或出問題了。

原因是datagrid行是根據datagrid-row-index和datagrid-row-r1-x-x來定位行的，如果一開始就將該行的index作為參數傳給deleteRow方法，每行的index是固定了的，其他行的index並不會隨着刪除某一行而改變掉。所以在連續刪除中，可能會出現，當刪除了一行以后，點擊了第二行的刪除按鈕，刪除的確實第三行這種情況。

這兩天也能看了一些解決辦法，但都覺得稍有復雜，偶然間看到的一個解決辦法，現貼出來一起分享：

HTML：

<table id="dg" class="easyui-datagrid" title=""></table>

 

 

JS:

$(function() {
                $('#dg').datagrid().datagrid('enableCellEditing');

                $('#dg').datagrid({
                    rownumbers: true,
                    multipleSelect:true,
                    collapsible: false,
                    pagination: true,
                    url: 'datagrid/dg.json',
                    method: 'get',
                    columns: [
                        [{
                            field: 'ck',
                            checkbox: true
                        }, {
                            field: 'name',
                            title: '姓名'
                        }, {
                            field: 'tel',
                            title: '手機號碼'
                        }, {
                            field: 'operate',
                            title: '操作',
                            formatter: function(val, row, index) {return '<a href="javascript:void(0);" onclick="deleteRow(this)"><i class="fa fa-trash-o" aria-hidden="true" style="color:#b8203d;font-size:2rem;"></i></a>';
                            }
                        }]
                    ]
                })
            });

function getRowIndex(target) {
　　var tr = $(target).closest('tr.datagrid-row');
return parseInt(tr.attr('datagrid-row-index'));
}

function deleteRow(target) {
　　alert(getRowIndex(target));
　　$('#membershipCardData1').datagrid('deleteRow', getRowIndex(target));
}