如何仅使单击的单元格可编辑，而不是单击行中的所有可编辑单元格-使用jqgrid？

Question

目前，我在我单击的可编辑行中获取所有单元格（可编辑：true），而不仅仅是单击的单元格。该表类似于此链接中的表：http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing4.htm。我已经浏览了链接：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing，但没有帮助（可能是由于我尝试的方式有错）并且还尝试了 stackoverflow 相关问题中给出的答案（使用了属性：cellEdit：true，cellsubmit ：“clientArray”）。

请帮助我使用上面的链接作为参考http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing4.htm（我认为主要是“onSelectRow”、“ondblClickRow”功能需要更新。我尝试了onSelectCell等但失败了！）。

提前致谢。

Answer 1

如果您需要使用单元格编辑，您必须在 jqGrid 定义中包含 cellEdit: true。如果您使用本地数据类型，那么您应该另外使用cellsubmit: "clientArray"。如果要在远程源上保存数据，则必须在服务器代码中实现编辑并指定 jqGrid 的 cellurl 选项。 The documentation 描述 jqGrid 在保存单元格时发送到服务器的内容。

Answer 2

我目前正在使用 Typescript 开发一个 Angular 2 应用程序，我有一个不同的需求，我希望能够单击网格中的一行，但只有一个单元格可编辑。我不喜欢用户必须单击实际单元格来编辑它的用户体验。相反，单击该行会突出显示该行，然后使一个单元格可编辑。截图如下：

诀窍是我需要在网格上将 cellEdit 设置为 false，然后在声明我的列模型数组时将单个列可编辑设置为 true，并为列的 editoptions 编写一个更改事件。我还必须为网格的 onSelectRow 事件编写代码，以跟踪所选的当前行并恢复所选的前一行。 Typescript 代码的 sn-p 如下：

  private generateGrid() {

let colNames = ['id', 'Name', 'Total', 'Assigned', 'Distributed', 'Remaining', 'Total', 'Assigned', 'Remaining', 'Expiration'];
let self = this;

// declare variable to hold Id of last row selected in the grid
let lastRowId;

let colModel = [
  { name: 'id', key: true, hidden: true },
  { name: 'name' },

  { name: 'purchasedTotalCount', width: 35, align: 'center' },
  { name: 'purchasedAssignedCount', width: 35, align: 'center' },
  { name: 'purchasedDistributedCount', width: 35, align: 'center' },
  { name: 'purchasedRemainingCount', width: 35, align: 'center' },
  // receivedTotalCount is the only editable cell;
  // the custom change event works in conjunction with the onSelectRow event
  // to get row editing to work, but only for this one cell as being editable;
  // also note that cellEdit is set to false on the entire grid, otherwise it would
  // require that the individual cell is selected in order to edit it, and not just
  // anywhere on the row, which is the better user experience
  { name: 'receivedTotalCount',
    width: 35,
    align: 'center',
    editable: true,
    edittype: 'text',
    editoptions: {
      dataEvents: [
        {
          type: 'change', fn: function(e) {
            //TODO: don't allow decimal numbers, or just round down
            let count = parseInt(this.value);
            if (isNaN(count) || count < 0 || count > 1000) {
              alert('Value must be a whole number between 0 and 1000.');
            } else {
              self.updateLicenses(parseInt(lastRowId), count);
            }
          }
        },
      ]
    }
  },
  { name: 'receivedAssignedCount', width: 35, align: 'center' },
  { name: 'receivedRemainingCount', width: 35, align: 'center' },
  { name: 'expirationDate', width: 45, align: 'center', formatter: 'date' }
];

jQuery('#licenseManagerGrid').jqGrid({
  data: this.childTenants,
  datatype: 'local',
  colNames: colNames,
  colModel: colModel,
  altRows: true,
  rowNum: 25,
  rowList: [25, 50, 100],
  width: 1200,
  height: '100%',
  viewrecords: true,
  emptyrecords: '',
  ignoreCase: true,
  cellEdit: false,  // must be false in order for row select with cell edit to work properly
  cellsubmit: 'clientArray',
  cellurl: 'clientArray',
  editurl: 'clientArray',
  pager: '#licenseManagerGridPager',
  jsonReader: {
    id: 'id',
      repeatitems: false
  },

  // make the selected row editable and restore the previously-selected row back to what it was
  onSelectRow: function(rowid, status) {
    if (lastRowId === undefined) {
      lastRowId = rowid;
    }
    else {
      jQuery('#licenseManagerGrid').restoreRow(lastRowId);
      lastRowId = rowid;
    }
    jQuery('#licenseManagerGrid').editRow(rowid, false);
  },
});
}

此外，我希望转义键允许用户中止对单元格的更改，然后将单元格恢复到之前的状态。这是通过 Typescript 中的以下 Angular 2 代码完成的：

@Component({
  selector: 'license-manager',
  template: template,
  styles: [style],
  host: {
    '(document:keydown)': 'handleKeyboardEvents($event)'
  }
})

// handle keypress so a row can be restored if user presses Escape
private handleKeyboardEvents(event: KeyboardEvent) {
  if (event.keyCode === 27) {
    let selRow = jQuery('#licenseManagerGrid').jqGrid('getGridParam', 'selrow');
    if (selRow) {
      jQuery('#licenseManagerGrid').restoreRow(selRow);
    }
  }
}