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

 

 

posted @ 2017-09-19 14:35  S.mh  阅读(1871)  评论(0编辑  收藏  举报