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写一个change事件。我还必须为网格的onSelectRow事件编写代码，以跟踪所选的当前行并恢复选定的上一行。下载的Typescript代码片段如下：

  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);
    }
  }
}

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

2 个答案: