前言
之前公司使用jqgrid的新增修改都是基于单条数据弹一个框进行插入/修改数据库后,返回表格进行刷新来实现的。
最近有一个需求想让直接在页面上进行编辑单条数据,新增直接新增在表格上进行操作然后保存。
查阅了jqgrid的api之后找到了如下方法:
//新增行:
$("#jqGrid").jqGrid("addRowData", id, dataRow, "first");
#jqGrid表示jqgrid表格的ID,addRowData表示新增一行数据,id表示这一行数据在此表格中的主键,dataRow表示新增的这一行数据的结构,最后面的字段表示新增在表格的第一行(也可以设置end,新增在最后一行);
//新增行demo:
var dataRow = {
"transaction_name" : "",
"create_time" : "",
};
$("#jqGridIncome").jqGrid("addRowData", -1, dataRow, "first");
我这边是直接将ID设置为-1,后续加入限制保证-1的唯一性。
//编辑行:
$("#jqGridIncome").jqGrid('editRow', rowId);
rowId表示编辑行的id,前提得设置该行数据字段可编辑。如下:
{ label: '交易方名称', name: 'transaction_name' , width: 100,sortable: false,editable: true,edittype:'text'},
加入editable: true edittype:'text',设置可编辑,并且编辑类型为text。这样调用editRow之后就可以实现改行可编辑了。
//删除行:
$("#jqGridIncome").jqGrid("delRowData", rowId);
rowId表示编辑行的id,该操作可以删除页面上的单行数据,可以配合新增之后的取消来同步使用,如果要操作到数据库还是得写请求到后台去。
实现效果
//配合使用的demo:
//添加
function addIncomeRowData(){
if($("#jqGridIncome").find(".editable").length > 0){ //存在编辑状态的行
alertMsg("存在未保存的数据,请操作完成后进行编辑!");
return;
}
var dataRow = {
"transaction_name" : "",
"create_time" : "",
};
$("#jqGridIncome").jqGrid("addRowData", -1, dataRow, "first");
editIncomeParam(-1);//新增一行之后,直接进入编辑状态
}
//编辑
function editIncomeParam(rowId) {
if($("#jqGridIncome").find(".editable").length > 0){ //存在编辑状态的行
alertMsg("存在未保存的数据,请操作完成后进行编辑!");
return;
}
$("#jqGridIncome").jqGrid('editRow', rowId); //开启该行的编辑
}
//取消
function cancelIncomeParam(rowId) {
if(rowId == -1){ //如果是刚刚新建了一行数据点了取消
$("#jqGridIncome").jqGrid("delRowData", rowId); //删除当前行
return;
}
jQuery('#jqGridIncome').restoreRow(rowId); //用修改前的数据填充当前行
}
//保存
function saveIncomeParam(rowId){
if($("#"+rowId+"_transaction_name").val().length == 0){ //保存前的验证
alertMsg("交易方名称不可为空!");
return;
}
var parameter = {
url : "xxxxxx",
mtype : "POST",
extraparam : {
//可以加入额外参数
},
successfunc : function(data) {
//返回true会使用修改后的数据填充当前行,否则使用修改前的数据填充,同时关闭编辑模式
return true;
}
}
//saveRow方法会把rowId行的数据作为参数调用parameter里面的请求
jQuery('#jqGridIncome').saveRow(rowId, parameter);
reloadIncomeGrid(); //重新加载表格
}