easyui datagrid 删除行问题

var row = $('#t1').datagrid('getSelected');
if (row) {
         var rowIndex = $('#t1').datagrid('getRowIndex', row);
         $('#t1').datagrid('deleteRow', rowIndex);
         $('#t1').datagrid('reload');//删除后重新加载下
}

$('#tt').datagrid({
                width:810,
                height:400,
                idField:'xsbh',
                url:'',
                columns:[[
                   {field:'xsbh',title:'编号',width:80},
                  {field:'opt',title:'操作',width:100,align:'center',
                    formatter:function(value,rec,index){
                        var delete = '<a href="#" mce_href="#" onclick="del(\''+ index +'\')">删除</a> ';
                        return delete ;
                    }
                  }
                ]],
               pagination:true
            });
        })  红色部分加上

可以无限连删啊，没异常啊
<!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>

就是删除完成后，行号发生了变化，本来你是选择第2行的，有可能删的是第3行。这是easyui的一个bug，每次删一行后，剩下的所有行会自动重新排序，所以按行号删的话不行

就是删除完成后，行号发生了变化，本来你是选择第2行的，有可能删的是第3行。这是easyui的一个bug，每次删一行后，剩下的所有行会自动重新排序，所以按行号删的话不行那有没好的解决办法啊？

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

可以这样写： $('#t1').datagrid('deleteRow', rowIndex);
var rows = $('#t1').datagrid("getRows");
$('#t1').datagrid("loadData", rows);

http://www.cnblogs.com/zgqys1980/archive/2010/12/21/1913076.html

这样前台删除是可能准确删除了，不过通过以下语句获取已经删除的记录貌似失效了。
var deleted = $('#t1').datagrid('getChanges', "deleted");

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

调试易

easyui datagrid 删除行问题

解决方案 »