jqgrid 选中行触发编辑，切换下一行时验证和异步保存上一行数据

有时，我们需要批量修改或填写一些相似的数据。可以以jqgrid表来显示，可能的效果如下：

 

 

选中触发行编辑参考：jqgrid 单击行启用行编辑，切换行保存原编辑行

本文主要说说验证和异步保存上一条数据的，以下是我项目中的内容，为了做记录留存，没有进行精简处理，感兴趣可以大致阅读下。

我的思路是：

1）用隐藏控件 selectRowId 来记录上一个编辑的行主键。获取值： $("#selectRowId").val()

2）通过隐藏控件值来追踪和验证上个编辑单元格的格式，并对错误的做提示，正确的直接通过

3）验证不通过不允许切换到下个编辑行；验证通过异步保存数据，并将行主键值存储在隐藏控件，保存上个编辑行，触发下个行为编辑状态

$.jgrid.gridUnload("jqGrid");//先卸载

    $("#jqGrid").jqGrid({
        url: 'QueryTargetDetailList',
        postData: {
            targetTagId: $("#TargetTagId").val(),
            ...
        },
        mtype: "POST",
        styleUI: 'Bootstrap',
        datatype: "json",//如果url中需要回调函数，则此处格式为jsonp
        //altRows: true,
        editurl: 'clientArray',
        responsive: true,
        page: 1,
        colModel: [
            { label: '编号', name: 'Id', width: 50, key: true, editable: false },
            ...
        ],
        shrinkToFit: true,//是否列宽度自适应。true=适应 false=不适应
        loadonce: false,
        viewrecords: true,
        onSelectRow: EditSelectRow,
        height: window.innerHeight * 0.6,
        width: $(".modal-body").width()
        //rowNum: fieldJson.length,
    });

写在 EditSelectRow 方法中的内容如下：

//选中行启用行编辑
function EditSelectRow(id) {
    var result = ValidateTvalue();//验证数据
    if (result != "" && result.length > 0) {
        abp.message.error(result);
        return;
    }

    SaveOneScore();//保存上一行数据

    //当前选中行
    $("#selectRowId").val(id);//临时存储当前选中行
    //启用当前行为编辑状态
    $("#jqGrid").jqGrid('editRow', id, { keys: true, focusField: 17 });
}

写在 ValidateTvalue 方法中的内容如下：

//自定义验证
function ValidateTvalue() {
    var result = "";
    var oldSelectRowId = $("#selectRowId").val();
    if (oldSelectRowId != null && oldSelectRowId != "" && oldSelectRowId.length > 0) {
        $("#jqGrid").jqGrid('saveRow', oldSelectRowId);//保存上一行
        var rowDatas = $("#jqGrid").jqGrid('getRowData', oldSelectRowId);//获取上一行数据

        //#region 验证分数是否为数值
        var regu = "^[0-9]+(.[0-9]{2})?$";
        //var regu = "/^\+?(\d*\.\d{2})$/";
        var re = new RegExp(regu);
        if (re.test(rowDatas.MarkScore)) {
            //return [true, ""];
        }
        else {
            result = "打分值【" + rowDatas.MarkScore + "】错误，请输入数值型.如：12或12.23";
            $("#jqGrid").jqGrid('editRow', oldSelectRowId, { keys: true, focusField: 17 });
        }
        //#endregion

        //#region 验证分数的范围值
        var MarkScore = rowDatas.MarkScore - 0;//打分
        var Weight = rowDatas.Weight - 0;//权重分
        if (MarkScore >= 0 && MarkScore <= Weight) {
            //return [true, ""];
        }
        else {
            result = "打分值【" + rowDatas.MarkScore + "】应在【" + 0 + "~" + rowDatas.Weight + "】范围内";
            $("#jqGrid").jqGrid('editRow', oldSelectRowId, { keys: true, focusField: 17 });
        }
        //#endregion

    }
    return result;
}

写在 SaveOneScore 方法中的代码如下：

//保存上一条信息
function SaveOneScore() {
    //原选中行ID
    var oldSelectRowId = $("#selectRowId").val();
    if (oldSelectRowId != null && oldSelectRowId != "" && oldSelectRowId.length > 0) {
        $("#jqGrid").jqGrid('saveRow', oldSelectRowId);//保存上一行
        var rowDatas = $("#jqGrid").jqGrid('getRowData', oldSelectRowId);//获取上一行数据
        //计算当前指标最终得分
        var endScore = CalculateScore(oldSelectRowId, rowDatas);
        //设置打分后的单元格值
        $("#jqGrid").setCell(oldSelectRowId, 'EndScore', endScore);

        //异步保存打分和得分
        $.ajax({
            type: "post",
            url: "../api/services/api/MonthBonus/SaveEndScore",
            data: {
                DetailId: rowDatas.Id,
                MarkScore: rowDatas.MarkScore,
                EndScore: endScore
            },
            success: function (e) {
                //abp.message.success("", "打分成功！");
            },
            error: function (e) {
                if (e.responseText.indexOf("<title>") != -1) {
                    var start = e.responseText.indexOf("<title>");
                    var end = e.responseText.indexOf("</title>");
                    abp.message.error(e.responseText.substring(start + 7, end), rowDatas.TargetName + "编号【" + rowDatas.Id.toString() + "】打分失败");
                }
                else
                    abp.message.error(e.responseText, rowDatas.TargetName + "编号【" + rowDatas.Id.toString() + "】打分失败");
            }
        });
    }
}

 由于不想整理了，就草草做了以上粘贴，将就看了。