easyui datagrid 删除行问题

三木哥 2014-06-24 03:51:53

用以下代码删除datagrid数据行：
var row = $('#t1').datagrid('getSelected');
if (row) {
var rowIndex = $('#t1').datagrid('getRowIndex', row);
$('#t1').datagrid('deleteRow', rowIndex);
}

每删除一次，行号都会发生变化，导致连续删除时会发生异常。
大家有好的解决办法吗？
谢谢！

...全文

35569 35 打赏收藏转发到动态举报

写回复

用AI写文章

35 条回复

切换为时间正序

请发表友善的回复…

发表回复

fuzhzh345 2018-08-01

打赏
举报

这个帖子好久远，我来补下我的想法：

获取选中行，删除选中行的数据，从索引最大值开始删除，所以不用管重新排序的问题了，也不用reload的方法；
代码：
//获取要删除的行，用复选框的方式，getSelections也是如此，可楼主获取的单行getSelected，所以感觉又不是楼主想要的
var selectRows = $("#dg").datagrid("getChecked");

for (var i = selectRows - 1; i >= 0; i--) {
var index = $('#dg').datagrid('getRowIndex', selectRows[i]);
$('#dg').datagrid('deleteRow', index);
}

gaala1 2017-03-13

打赏
举报

就是在原来的基础上循环，但是行号改为每次获取第一行进行删除。最终代码： function moveLeft(){ var rows=$("#table-list").datagrid('getSelections'); var len=rows.length; if (rows) { for(var i=0;i<len;i++){ var row=$("#table-list").datagrid('getSelected'); var rowIndex = $('#table-list').datagrid('getRowIndex', row); $('#table-list').datagrid('deleteRow', rowIndex); var rows = $('#table-list').datagrid("getRows"); $('#table-list').datagrid("loadData", rows); } } }

西门刮风 2017-03-08

打赏
举报

引用 14 楼 splendid_java 的回复:

可以这样写：


 $('#t1').datagrid('deleteRow', rowIndex);  
var rows = $('#t1').datagrid("getRows");
 $('#t1').datagrid("loadData", rows);

这个比较实用说实话简单粗暴 666 666 6666 6 6

cl18334797638 2016-12-30

打赏
举报

这些只支持空数据删除吧，有数据删除的话，会把数据刷没的

306541421 2016-06-21

打赏
举报

引用 14 楼 splendid_java 的回复:

可以这样写：


 $('#t1').datagrid('deleteRow', rowIndex);  
var rows = $('#t1').datagrid("getRows");
 $('#t1').datagrid("loadData", rows);

这个绝对可以

ao520ru 2016-03-26

打赏
举报

批量选中后删除


        var ids = [];
        var index = [];
        var rows = $('#table').datagrid('getSelections');

        for (var i = 0; i < rows.length; i++) {
            ids.push(rows[i].product_id);
            index.push($('#table').datagrid('getRowIndex', rows[i]));
        }
        for (var i = 0; i < index.length; i++) {
                        $('#table').datagrid('deleteRow', index[i]-i);
                    }

夜圆月 2016-03-22

打赏
举报

看到帖子收到启发用以下这种方式完美解决： data = $('#t1')..datagrid("getData"); $('#t1')..datagrid("loadData", data);

zjhaag 2016-01-16

打赏
举报

引用 26 楼 lxhefeiyancao 的回复:

[quote=引用 24 楼 Sky_qing 的回复:] 这位仁兄不要生气，我今天正好也碰到这个问题，代码这就分享给大家。
// 删除 委印单明细
$btnGeneralEditRemoveDetail.bind('click', function ()
{
    // 1、如果有正在编辑的行，则需取消编辑
    if (editIndexBook != undefined)
    {
        $generalEditDatagrid.datagrid('cancelEdit', editIndexBook);
    }

    // 2、获取已勾选的行
    var allCheckedRows = $generalEditDatagrid.datagrid('getChecked');
    console.info(allCheckedRows.length);
    console.info(allCheckedRows);

    // 3、对已勾选的行进行遍历删除
    if (allCheckedRows.length > 0)
    {
        var checkedRowLength = allCheckedRows.length;
        for (var i = 0; i < checkedRowLength; i++)
        {
            var checkedRow = allCheckedRows[0];
            var checkedRowIndex = $generalEditDatagrid.datagrid('getRowIndex', checkedRow);
            $generalEditDatagrid.datagrid('deleteRow', checkedRowIndex);
        }
    }
});
说明：一、对于第1点中的变量 editIndexBook，大家可以忽略，或者把这一小段代码去除。二、第2点没啥好说的，直接讲第3点哈，一定要把“已勾选项的个数放到一个中间变量”，即 checkedRowLength，因为在逐个删除过程中，allCheckedRows.length 会逐个自动减 1，JavaScript 的数组就是这样灵活；三、删除项永远是“下标为 0 的那一项”，即 allCheckedRows[0]，不可以写成 allCheckedRows[i]，所以我的这段 for() 循环其实可以改写成 while() ，不管如何请务必注意以上几点。

这个可以的. 看起来感觉和我的代码差不多.但是改成这个就可以了.

dreamwithwind 2015-11-17

打赏
举报

getRowIndex的参数可以是一行记录或一个ID字段值，id值是唯一的，可以通过id值获取行号

Milk- 2015-09-16

打赏
举报

[quote=引用 24 楼 Sky_qing 的回复:] 这位仁兄不要生气，我今天正好也碰到这个问题，代码这就分享给大家。


// 删除 委印单明细
$btnGeneralEditRemoveDetail.bind('click', function ()
{
    // 1、如果有正在编辑的行，则需取消编辑
    if (editIndexBook != undefined)
    {
        $generalEditDatagrid.datagrid('cancelEdit', editIndexBook);
    }

    // 2、获取已勾选的行
    var allCheckedRows = $generalEditDatagrid.datagrid('getChecked');
    console.info(allCheckedRows.length);
    console.info(allCheckedRows);

    // 3、对已勾选的行进行遍历删除
    if (allCheckedRows.length > 0)
    {
        var checkedRowLength = allCheckedRows.length;
        for (var i = 0; i < checkedRowLength; i++)
        {
            var checkedRow = allCheckedRows[0];
            var checkedRowIndex = $generalEditDatagrid.datagrid('getRowIndex', checkedRow);
            $generalEditDatagrid.datagrid('deleteRow', checkedRowIndex);
        }
    }
});

说明：一、对于第1点中的变量 editIndexBook，大家可以忽略，或者把这一小段代码去除。二、第2点没啥好说的，直接讲第3点哈，一定要把“已勾选项的个数放到一个中间变量”，即 checkedRowLength，因为在逐个删除过程中，allCheckedRows.length 会逐个自动减 1，JavaScript 的数组就是这样灵活；三、删除项永远是“下标为 0 的那一项”，即 allCheckedRows[0]，不可以写成 allCheckedRows[i]，所以我的这段 for() 循环其实可以改写成 while() ，不管如何请务必注意以上几点。

aaaa_chy 2015-08-31

打赏
举报

我明白了，因为删除行以后行号不会重新分配，但是可以先获得rows，再重新loaddata，这样行号就会重新分配，下次删除就不会出问题了

Joe_vv 2015-08-24

打赏
举报

老子最鄙视这种人了，问大家问题，问完以后知道答案了不分享出来。

lucky小狼 2015-03-18

打赏
举报

引用 22 楼 jianhao84 的回复:

[quote=引用 14 楼 splendid_java 的回复:] 可以这样写：
 $('#t1').datagrid('deleteRow', rowIndex);  
var rows = $('#t1').datagrid("getRows");
 $('#t1').datagrid("loadData", rows);

没想到这么个最简单的方法最没有后遗症。。赞一个[/quote] 这个就是最终的解决办法么？

英语受害者 2014-11-27

打赏
举报

引用 14 楼 splendid_java 的回复:

可以这样写：


 $('#t1').datagrid('deleteRow', rowIndex);  
var rows = $('#t1').datagrid("getRows");
 $('#t1').datagrid("loadData", rows);

没想到这么个最简单的方法最没有后遗症。。赞一个

断尾巴狼 2014-11-18

打赏
举报

引用 17 楼 Sennet 的回复:

[quote=引用 14 楼 splendid_java 的回复:] 可以这样写：
 $('#t1').datagrid('deleteRow', rowIndex);  
var rows = $('#t1').datagrid("getRows");
 $('#t1').datagrid("loadData", rows);

终于搞定了，还是多谢这位兄弟，是你给了我灵感。。。[/quote] 这位,能否把解决办法分享下

qq_23437777 2014-11-18

打赏
举报

引用 17 楼 Sennet 的回复:

[quote=引用 14 楼 splendid_java 的回复:] 可以这样写：
 $('#t1').datagrid('deleteRow', rowIndex);  
var rows = $('#t1').datagrid("getRows");
 $('#t1').datagrid("loadData", rows);

终于搞定了，还是多谢这位兄弟，是你给了我灵感。。。[/quote] 请问是怎么做的呢，可否告诉一下

li_jian_feng 2014-09-29

打赏
举报



while (true) {
var rows = dg.datagrid('getChecked');
if (rows.length >= 1) {
dg.datagrid('deleteRow', dg.datagrid('getRowIndex', rows[0]));
edit_rows_length -= 1;
} else {
return false;
}
}

li_jian_feng 2014-09-29

打赏
举报

while (true) { var rows = dg.datagrid('getChecked'); if (rows.length >= 1) { dg.datagrid('deleteRow', dg.datagrid('getRowIndex', rows[0])); edit_rows_length -= 1; } else { return false; } }

ZHOU西口 2014-06-25

打赏
举报

可以这样写：


 $('#t1').datagrid('deleteRow', rowIndex);  
var rows = $('#t1').datagrid("getRows");
 $('#t1').datagrid("loadData", rows);

三木哥 2014-06-25

打赏
举报

引用 7 楼 u012463264 的回复:

可以无限连删啊，没异常啊 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Row Editing DataGrid - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> </head> <body> <h2>Row Editing DataGrid</h2> <div class="demo-info"> <div class="demo-tip icon-tip"></div> <div>Click the row to start editing.</div> </div> <div style="margin:10px 0;"></div> <table id="dg" class="easyui-datagrid" title="Row Editing DataGrid" style="width:700px;height:auto" data-options=" iconCls: 'icon-edit', singleSelect: true, toolbar: '#tb', url: '../datagrid/datagrid_data1.json', onClickRow: onClickRow "> <thead> <tr> <th data-options="field:'itemid',width:80">Item ID</th> <th data-options="field:'productid',width:100, formatter:function(value,row){ return row.productname; }, editor:{ type:'combobox', options:{ valueField:'productid', textField:'productname', url:'../datagrid/products.json', required:true } }">Product</th> <th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th> <th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th> <th data-options="field:'attr1',width:250,editor:'text'">Attribute</th> <th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th> </tr> </thead> </table> <div id="tb" style="height:auto"> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">Append</a> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="remove()">Remove</a> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">Accept</a> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">Reject</a> <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">GetChanges</a> </div> <script type="text/javascript"> var editIndex = undefined; function endEditing(){ if (editIndex == undefined){return true} if ($('#dg').datagrid('validateRow', editIndex)){ var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'productid'}); var productname = $(ed.target).combobox('getText'); $('#dg').datagrid('getRows')[editIndex]['productname'] = productname; $('#dg').datagrid('endEdit', editIndex); editIndex = undefined; return true; } else { return false; } } function onClickRow(index){ if (editIndex != index){ if (endEditing()){ $('#dg').datagrid('selectRow', index) .datagrid('beginEdit', index); editIndex = index; } else { $('#dg').datagrid('selectRow', editIndex); } } } function append(){ if (endEditing()){ $('#dg').datagrid('appendRow',{status:'P'}); editIndex = $('#dg').datagrid('getRows').length-1; $('#dg').datagrid('selectRow', editIndex) .datagrid('beginEdit', editIndex); } } function remove(){ if (editIndex == undefined){return} $('#dg').datagrid('cancelEdit', editIndex) .datagrid('deleteRow', editIndex); editIndex = undefined; } function accept(){ if (endEditing()){ $('#dg').datagrid('acceptChanges'); } } function reject(){ $('#dg').datagrid('rejectChanges'); editIndex = undefined; } function getChanges(){ var rows = $('#dg').datagrid('getChanges'); alert(rows.length+' rows are changed!'); } </script> </body> </html>

这位兄弟的代码是直接从easyui官网的demo里来的，我也正在研究，只是我用的是1.3的版本，以上代码是1.3.6的，不知适不知用。。。