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

Question

目前我得到的所有单元格（与编辑：真）编辑在我点击而不仅仅是点击单元格中的一行。该表与此链接中的表类似：http://www.ok-soft-gmbh.com/jqGrid/ClientsideEditing4.htm。我已经通过链接了：http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing，但并没有帮助（可能是因为我在我试过的方式错误），也试过在计算器的相关问题给出的答案（所使用的属性：cellEdit：真，cellsubmit：“ clientArray“）。 （我认为主要是“onSelectRow”，“ondblClickRow”函数需要更新，我尝试过SelectSeell等，但失败了！）。

在此先感谢。

Answer 1

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

Answer 2

我目前工作的一个角2应用程序与打字稿，和我有不同的需要，我希望能够单击网格行，但只能有一个单元编辑。我不喜欢用户不得不点击实际单元格进行编辑的用户体验。相反，单击该行将突出显示该行，然后使该单元格可编辑。下面是截图：

诀窍是，我需要cellEdit设置为false在网格上，然后宣布我的列模型阵列时设置的各个列编辑为真，并写了一个更改事件该列的编辑选项。我还必须为网格的onSelectRow事件编写代码，以跟踪选定的当前行并恢复所选的前一行。打字稿代码片段低于：

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

此外，我想退出键允许用户放弃更改单元格，然后将细胞恢复到以前的状态。这是在手稿中使用以下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); 
    } 
    } 
}