最近使用easyui的datagrid插件，在做删除行的时候发现了一个问题：
代码如下：
Js代码
-
Grid:{
-
_index:undefined,
-
_grid:$(
“#grid_set”
),
-
load:
function
(){
-
$(
“#grid_set”
).datagrid({
-
striped:
true
,
-
fit:
false
,
-
singleSelect:
true
,
-
columns:[[
-
{field:
‘name’
,align:
‘left’
,width:100,title:
‘行/列名称’
,sortable:
true
,
-
editor:{
-
type:
‘validatebox’
,
-
options:{
-
required:
true
,
-
missingMessage:
“数据不可为空”
,
-
tipPosition:
“right”
,
-
valueField:
“name”
-
}
-
}
-
},
-
{field:
‘type’
,align:
‘left’
,width:120,title:
‘行/列值类型’
,sortable:
true
,
-
editor:{type:
‘combobox’
,options:{
-
editable:
false
,
-
data:[{text:
“浮点型”
,value:1,selected:
true
},{text:
“整型”
,value:2}]
-
},},
-
formatter:
function
(value,rowData,rowIndex){
-
if
(value==0){
-
return
;
-
}
-
if
(value==1){
-
return
“浮点型”
;
-
}
else
if
(value==2){
-
return
“整型”
;
-
}
-
}
-
},
-
{field:
‘opertaion’
,align:
‘left’
,width:30,title:
‘操作’
,
-
formatter:
function
(value,row,index){
-
if
(value)
return
value;
-
return
‘<span class=”ico2 icon-del delRows” onClick=”$$.Grid.remove();”> </span>’
;
-
}
-
}
-
]]
-
});
-
//初始化空行
-
$$.Grid.add();
-
//点击“添加”按钮触发的事件
-
$(
“#js_addLine”
).on(
“click”
,
function
(){
-
if
($(
this
).linkbutton(
‘options’
).disabled ==
false
) {
-
$$.Grid.add();
-
}
-
});
-
},
-
edit:
function
(){
-
var
_this = $$.Grid, _grid = _this._grid,_index = _this._index;
-
if
(_index == undefined){
return
true
;}
-
if
(_grid.datagrid(
‘validateRow’
, _index)){
-
// _grid.datagrid(‘endEdit’, _index);
-
_this._index = undefined;
-
return
true
;
-
}
else
{
-
return
false
;
-
}
-
},
-
add:
function
(){
-
var
_this = $$.Grid, _grid = _this._grid,_index = _this._index;
-
if
(_this.edit()){
-
_grid.datagrid(
‘appendRow’
,{});
-
_index = _grid.datagrid(
‘getRows’
).length-1;
-
_grid.datagrid(
‘selectRow’
, _index).datagrid(
‘beginEdit’
, _index);
-
_this._index = _index;
-
}
-
-
},
-
remove:
function
(){
-
var
_this = $$.Grid, _grid = _this._grid,_index = _this._index;
-
if
(_index == undefined){
-
var
rows = _grid.datagrid(
“getSelections”
);
-
for
(
var
i
in
rows){
-
var
index = _grid.datagrid(
“getRowIndex”
,rows[i]);
-
_grid.datagrid(
“deleteRow”
,index);
-
}
-
}
-
_grid.datagrid(
‘cancelEdit’
, _index).datagrid(
‘deleteRow’
, _index);
-
_this._index = undefined;
-
},
-
-
}
在删除的时候rows[]为空或不是对象的错误，所以将remove方法修改成有一个index参数的方法：
Js代码
-
remove:
function
(id){
-
var
_this = $$.Grid, _grid = _this._grid;
-
var
index = _grid.datagrid(
“getRowIndex”
,id);
-
_index=index;
-
if
(_index != undefined){
-
_grid.datagrid(
“deleteRow”
,_index);
-
}
-
}
又发现传入的index不正确，比如我有三行数据，我删除第二行，index为1(index从0开始)，这是正确的，当我再删除原来的第三行数据(现在的第二行数据)，发现传入的index仍未2，但是id和datagrid-row-index都已经改变了，使用
Js代码
-
_grid.datagrid(
“reload”
);
重新加载，没有效果。
后再在网上找了到一个列子，是根据当前元素找到tr元素，然后获取datagrid-row-index属性的值，这样来获取index的，最终实现了删除的方法：
Js代码
-
onClick=
“$$.Grid.remove(this);”
-
-
getRowIndex:
function
(target){
-
//获取匹配的第一个祖元素
-
var
tr = $(target).closest(
‘tr.datagrid-row’
);
-
return
parseInt(tr.attr(
‘datagrid-row-index’
));
-
},
-
remove:
function
(target){
-
var
_this = $$.Grid, _grid = _this._grid;
-
_grid.datagrid(
‘deleteRow’
, $$.Grid.getRowIndex(target));
-
}
-
转载自http://yingruochen.iteye.com/blog/1973818