JQuery Easyui/TopJUI表格基本的删除功能（删除当前行和多选删除）

需求：数据表格datagrid实现删除当前行和多选删除的功能。

html

<a href="javascript:void(0)"
       data-toggle="topjui-menubutton"
       data-options="
       btnCls:'topjui-btn-red',
       onClick:delRow,
       iconCls:'fa fa-close'">删除</a>

js

var dg = '#productDg' ;//TODO 表格的id选择器


function delRow() {
        var rows =  $(dg).iDatagrid('getChecked');  //getChecked 在复选框被选中的时候返回所有行。
        if(rows.length == 0){
            return  $.iMessager.alert('操作提示', '未勾选需要删除的数据行！', 'messager-error'); // 未勾选的话弹出消息窗口
        }
        $.iMessager.confirm('确认','您确认想要删除这'+rows.length+'条记录吗？',function(r){
            if (r){
                var index = undefined;
                $.each(rows,function (i) {
                    index = $(dg).iDatagrid('getRowIndex',rows[i]);  //getRowIndex 返回指定行的索引号，该行的参数可以是一行记录或一个ID字段值。
                    if (editIndex == undefined){
                        $(dg).iDatagrid('deleteRow', index)    //deleteRow 删除行。
                    }else if(editIndex == index ){
                        $(dg).iDatagrid('cancelEdit', editIndex).iDatagrid('deleteRow', editIndex);
                        editIndex = undefined;
                    }else{
                        $(dg).iDatagrid('deleteRow', index)
                    }
                });
            }
        });
        if (editIndex == undefined){return}

    }

具体的实现代码用了topjui已经封装好了的方法，直接调用就行了，使用非常方便。

 

  EasyUI中文网：http://www.jeasyui.cn

  TopJUI前端框架：http://www.topjui.com

  TopJUI交流社区：http://ask.topjui.com