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

目前，我在可编辑的行中获取所有单元格（可编辑：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” 。 如果要在远程源上保存数据，则必须在服务器代码中实现编辑，并指定cellurl选项。 该文档描述了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); } } }