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() + "】打分失敗");
            }
        });
    }
}

 由於不想整理了，就草草做了以上粘貼，將就看了。