jqgrid 單擊行啟用行編輯，切換行保存原編輯行

為了加速表格互動編輯，我們往往希望通過選中行就觸發了行編輯，完成行編輯后，再選中另一個行做編輯，同時上一個編輯行被自動保存，直至完成需要的編輯內容。

頁面效果可能如下：

---

1）設置需要編輯的列 editable: true  參考如下：

 colModel: [
            { label: '字段編碼', name: 'FieldCode', key: true, width: 180, editable: false },
             {
                 label: '字段名稱',
                 name: 'FieldName',
                 width: 150,
                 editable: true,
                 edittype: "text",
                 editrules: { required: true }
             },
              {
                  label: '字段類型',
                  name: 'DataType',
                  width: 10,
                  hidden: true,
                  editable: true,
              },
              {
                  label: '是否排序',
                  name: 'IsOrder',
                  width: 80,
                  editable: true,
                  edittype: "select",
                  editoptions: {
                      //value: "true:是;false:否"
                      value: "true:true;false:false"
                  }
              },
               {
                   label: '列寬',
                   name: 'Width',
                   width: 55,
                   editable: true,
                   editrules: { required: true, integer: true },
                   edittype: "text"
               }]

2）使用 onSelectRow 選中行事件

    $("#fieldGrid").jqGrid({
        ...
        onSelectRow: EditSelectRow,
        pager: "#fieldGridPager",
        ...
    });

3）編寫行選中的自定義方法 EditSelectRow

//選中行啟用行編輯
function EditSelectRow(id)
{
    //原選中行ID
    var oldSelectRowId = $("#selectRowId").val();
    if (oldSelectRowId != null && oldSelectRowId != "" && oldSelectRowId.length > 0) {
        $("#fieldGrid").jqGrid('saveRow', oldSelectRowId);//保存上一行
    }

    //當前選中行
    $("#selectRowId").val(id);//臨時存儲當前選中行
    //$("#fieldGrid").jqGrid('editRow', id);
    $("#fieldGrid").jqGrid('editRow', id, { keys: true, focusField: 1 });
}

 

---

需要特別注意：不能同時支持內置行編輯和行事件觸發的行編輯。會產生行結束編輯的干擾項，比較坑，請繞開。若要使用行編輯請分別采用以下某一種方式

jqgrid 單擊行啟用行編輯，切換行保存原編輯行

jqgrid 使用自帶的行編輯

jqgrid 選中行觸發編輯，切換下一行時驗證和異步保存上一行數據