版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/LYQ2332826438
近期在做项目时,使用了easyui,在做到更新表格中的某一行数据时,遇到了调用updataRow方法时,数据更新无效的情况
表格请求数据无问题
$("#dgd_buliding_ref").datagrid({
singleSelect : true,
queryParams : {block_id : this.p_projectBlock_id},
fitColumns : false,
rownumbers : true,
idField : 'projectBuildingId',
url : 'building/getProjectBuildingListByBlock',
columns : [ [
{
field : "projectBuildingId",
title : "工程楼号",
width : 80,
halign : 'center',
align : 'center'
},{
field : "projectBuildingCode",
title : "工程楼号",
width : 80,
halign : 'center',
align : 'center'
}, {
field : "projectBuildingName",
title : "营销楼号",
width : 80,
halign : 'center',
align : 'center'
}, {
field : "productType",
title : "业态类型",
width : 100,
halign : 'center',
align : 'center',
formatter : function(value) {
var val = '';
$.each(buliding_ref_set.p_productTypeData, function(n, v) {
if (v.dictId == value) {
val = v.dictValue;
return false;
}
});
return val;
}
}, {
field : "buildingGroupId",
title : "所属组团",
width : 80,
halign : 'center',
align : 'center',
formatter : function(value) {
var val = '';
$.each(buliding_ref_set.p_buildingGroupData, function(n, v) {
if (v.buildingGroupId == value) {
val = v.buildingGroupName;
return false;
}
});
return val;
}
}, {
field : "attribute1",
title : "明源计划楼栋ID",
width : 300,
formatter : function(value) {
if(value){
var val = value+'<a href="#" rel="nofollow" class="easyui-linkbutton" style="margin-left:5px;" target="_blank">关联楼栋</a>';
return val;
}else{
return '<a href="#" rel="nofollow" class="easyui-linkbutton" style="margin-left:5px;" target="_blank">关联楼栋</a>';
}
},
halign : 'center'
},{
field : "attribute2",
title : "明源实际楼栋ID",
width : 300,
formatter : function(value) {
if(value){
var val = value+'<a href="#" rel="nofollow" class="easyui-linkbutton" style="margin-left:5px;" target="_blank">关联楼栋</a>';
return val;
}else{
return '<a href="#" rel="nofollow" class="easyui-linkbutton" style="margin-left:5px;" target="_blank">关联楼栋</a>';
}
},
halign : 'center'
}] ]
});
但是在做数据行更新时,调用updataRow时,就无法更新页面显示数据,更新数据行代码如下
var index = $('#dgd_buliding_ref').datagrid('getRowIndex',$("#dgd_buliding_ref").datagrid('getSelected'));
$('#dgd_buliding_ref').datagrid('updateRow',{
index:index,
row: data
});
参考easyuiAPI也没发现有什么错误的地方,但是把index:index改成具体的数字,更新就完全没问题!!
最后无意中使者将row:data改成 row : {data:data}竟然能够更新成功
更新代码如下
var index = $('#dgd_buliding_ref').datagrid('getRowIndex',$("#dgd_buliding_ref").datagrid('getSelected'));
$('#dgd_buliding_ref').datagrid('updateRow',{
index: index,
row: {data:data}
});
总结如下:如果只是更新表格中的单个单元格,用API中给的方式是没为题的,但是如果row的数据是个行对象数据,那么久需要添加data:data格式数据
另外遇到的几个问题
问题:
1.修改后前门显示的行号发生了变化,比如原来的1编程010 等
原因:easyui的js源码问题。
解决办法:把var index = index 中的index转化成Int类型
即: var index = parseInt(index);
问题解决;
2.原来的行中渲染的按钮不见了
解决办法:重新渲染按钮
$('.editCabinet').linkbutton({ text:'修改', plain:true, iconCls:'icon-edit' });
$('.delCabinet').linkbutton({ text:'删除', plain:true, iconCls:'icon-remove' });
以上问题可能是easyui的bug造成的。
好的,今天就总结到这里了,希望对大家有帮助!