jqgrid表格单行新增，单行编辑，单行删除

前言

之前公司使用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(); //重新加载表格
}

如果此文章对你有帮助或者有任何疑点欢迎在评论区进行讨论，

我非常乐意帮各位解决我能力之内的事情！