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

Posted 儿时精神

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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() + "】打分失败");
            }
        });
    }
}

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

以上是关于jqgrid 选中行触发编辑,切换下一行时验证和异步保存上一行数据的主要内容,如果未能解决你的问题,请参考以下文章

怎样获取编辑后的jqgrid的值

jqGrid:默认情况下为“内联编辑模式”的所有行

jqgrid 不能选中行, 每次点击单元格都自动选中第一行

jqgrid 设置某行不能够被选中

获取jqgrid有多条行数据

如何更改jqgrid中唯一的一行背景