有时，我们需要批量修改或填写一些相似的数据。可以以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("");                    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() + "】打分失败");            }        });    }}

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