easyui行编辑

最新推荐文章于 2024-04-02 16:46:42 发布

xfl4629712

最新推荐文章于 2024-04-02 16:46:42 发布

阅读量797

点赞数

分类专栏：前端、报表相关

本文链接：https://blog.csdn.net/xfl4629712/article/details/53390334

版权

前端、报表相关专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了如何使用EasyUI实现表格的行编辑功能，包括双击开启编辑、使用updateRow和endEdit事件以及onAfterEdit事件处理。通过示例代码展示了开始编辑、结束编辑、验证、更新行数据和保存数据的完整流程。

摘要由CSDN通过智能技术生成

easyui行编辑实例:

关键字:双击开启行编辑,updateRow事件,endEdit事件,onAfterEdit事件

{field:'factCostAmount',title:'实收',width:100,

editor:{
type:'numberbox'
}
},

onDblClickRow:function(index,row){
if (endEditing()){//返回true则表示可以编辑(editIndex为undefined)
$(this).datagrid('beginEdit', index);//开启行编辑框
editIndex = index;
} else {
$('#datagrid-cost').datagrid('selectRow', editIndex);//选中索引为editIndex的行
}

//$(this).datagrid('beginEdit', index);//用此种方式直接开启行编辑,如果不点击关闭,开启另一行编辑框时,上一行不会自动关闭

},

onClickCell:function(index, field, value){
$(this).datagrid('endEdit', index);//关闭行编辑框
}

onAfterEdit:function(index, row, changes){//获取行编辑数据并动态计算
$('#datagrid-cost').datagrid('updateRow',{//只在页面更新
index: index,
row: {
costTotal: changes.factCostAmount*1.2
}
});

//可以直接取changes里的值保存
}

//结束行编辑
endEditing:function(){
//如果没有开启编辑的行,则可以编辑
if(editIndex == undefined){
return true;
}
//如果editIndex不等于undefined(editIndex已开启行编辑状态),则关闭当前行编辑状态
if($("#datagrid-cost").datagrid('validateRow',editIndex)){
$("#datagrid-cost").datagrid('endEdit',editIndex);
editIndex = undefined;
return true;
}else{
return false;
}
},

//保存数据(可以直接在onAfterEdit事件里保存数据)
saveAmount:function(){
var rows = $('#datagrid-cost').datagrid('getChecked');
if(rows.length < 1){
$.messager.alert('提示','请选择需要保存实收的费用记录!');
return ;
}
/*关闭编辑框*/
$.each(rows,function(i,n){
var index = $('#datagrid-cost').datagrid('getRowIndex',n);
$('#datagrid-cost').datagrid('endEdit',index);//关闭此行的行编辑
});

var objNotNull = new Array();
$.each(rows,function(i,n){
if(n.factCostAmount != null && n.factCostAmount != ''){
objNotNull.push(n);
}
});
if(objNotNull.length<1){
$.messager.alert('提示','实收金额不能为空!');
return ;
}

$.ajax({//将本次实收金额传到后台
url:Config.sysUrl + '/fyMain/saveAmount',
data:{
costAmount:JSON.stringify(objNotNull)
},
type:'post',
dataType:'json',
success: function(result){
if(result.success){
$.messager.alert('提示',result.msg);
$('#datagrid-cost').datagrid('reload');
}
}
});

},