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: ,

        colModel: [

            { label: '编号', name: 'Id', width: , 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() + "】打分失败");

            }

        });

    }

}

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

巴特西

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

最新文章

热门文章