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

Bertha 。 2022-01-22 12:33 616阅读 0赞

## 前言 ##

之前公司使用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，该操作可以删除页面上的单行数据，可以配合新增之后的取消来同步使用，如果要操作到数据库还是得写请求到后台去。

## **实现效果** ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dJTkdaSU5HTElV_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dJTkdaSU5HTElV_size_16_color_FFFFFF_t_70 1][]

## ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dJTkdaSU5HTElV_size_16_color_FFFFFF_t_70 2][] ##

##  ##

## **//配合使用的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(); //重新加载表格
    }

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dJTkdaSU5HTElV_size_16_color_FFFFFF_t_70]: /images/20220122/6ff2acb24b89445697865f4188ce21d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dJTkdaSU5HTElV_size_16_color_FFFFFF_t_70 1]: /images/20220122/fc1a9954647e4c829c5501b475318f6d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dJTkdaSU5HTElV_size_16_color_FFFFFF_t_70 2]: /images/20220122/a1e22f9ed31242c7a8a85102cad86f70.png