关于javascript:如何在jqGrid中内联添加后更新列

 2022-02-12 

How to update column after inline add in jqGrid

jqGrid 包含在 colmodel 中定义为

的列

1
2
3
4
5
6
{"name":"_actions",
 "formatoptions":{"editbutton":true,"keys":true
  ,"delbutton":true
    } },

{"name":"Kood","editable":true,"hidden":true}

按下工具栏中的内联添加按钮将新行添加到网格中。
保存数据后,控制器返回新的 Kood 列值。
这个新值应该分配给 Kood 列。

下面的代码显示了我尝试过的两种方法,但都失败了。 Kood 列值不会改变

内联添加后如何更新列?
如果使用保存操作按钮保存内联添加的行,如何更新列?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$grid.jqGrid('inlineNav', '#grid_toppager', {
  addParams: {
     addRowParams: {
            keys: true,
            // This is called if enter key is pressed to save added row
            aftersavefunc: afterSaveFuncAfterAdd,
        }
    },

  editParams: {
      keys: true,
      // This is called if saver button in toolbar is pressed on inline add
      aftersavefunc: afterSaveFuncAfterAdd,
    },
add: true,
edit: false,
save: true,
cancel: true
});

function afterSaveFuncAfterAdd(rowID, response ) {
  var json = $.parseJSON(response.responseText);
      postData = $grid.jqGrid('getGridParam', 'postData');
  // this shows correct value:
  alert(json.PrimaryKeyValues[0]);
  // attempt 1:
  $('#' + rowID + '_Kood').val(json.PrimaryKeyValues[0]);
  // attempt2:
  postData['Kood'] = json.PrimaryKeyValues[0];
  }


editRow 的回调aftersavefunc 将在编辑的and 之后被调用。目前你会发现没有$('#' + rowID + '_Kood')。此外,在内联编辑期间不会更改 postData,因此 $grid.jqGrid('getGridParam', 'postData') 不会为您提供任何有用的信息。

因此,我建议您将所需的所有数据作为 editurl 的响应发回。例如服务器计算的具有默认值的列,如上次编辑时间戳,您可以回发。 Add 操作的响应应该另外包含服务器生成的 id。收到服务器的响应后,可以使用 setRowDatasetCell 修改网格中的数据。

例如,你可以返回

1
{"Id":"DB_Id","Kood":"new Kood value"}

来自服务器作为对"添加"操作的响应并返回

1
{"Kood":"new Kood value"}

作为对"编辑"操作的响应。在这种情况下 afterSaveFuncAfterAdd 的代码可以像下面的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var afterSaveFunc = function (rowId, response) {
    var data = $.parseJSON(response.responseText);
    if ($.isPlainObject(data) && typeof data.Kood !=="undefined") {
        if (typeof data.Id !=="undefined") {
            // if we have 'Id' column in the grid we have to update the column
            // together with the value of `Kood`
            $(this).jqGrid('setRowData', rowId, { Id: data.Id, Kood: data.Kood });
            // if we have no additional `Id` we can update the Kood column only with
            // the statement like below
            // $(this).jqGrid('setCell', rowId, 'Kood', data.Kood);

            // in case of"Add" operation we have to update the row Id
            $('#' + $.jgrid.jqID(rowId)).attr('id', data.Id);
        } else {
            $(this).jqGrid('setCell', rowId, 'Kood', data.Kood);
        }
    }
}