我有一个 PrimeNG p 表,其中包含许多列和行,其中一列使用输入作为其单元格编辑器。精简版如下:
<p-table [value]="rowDatas" selectionMode="single" [(selection)]="selectedRowData">
<ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
<tr [pSelectableRow]="rowData">
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<input id="{{'hours' + rowIndex}}" pInputText type="text" [(ngModel)]="rowData.hours">
</ng-template>
<ng-template pTemplate="output">
{{rowData.hours}}
</ng-template>
</p-cellEditor>
</td>
</ng-template>
我可以使用 ViewChild 访问该表
@ViewChild(Table) private table: Table;
但我不知道从那里去哪里。 PrimeNG 文档没有给出如何以编程方式触发单元格编辑的提示。谷歌搜索它会用 EditableColumns 和 onClick 抛出一些东西,但这不起作用,并且会跳过应该编辑的行。
我可以通过 ID 识别输入字段(如果存在)。但只有当单元格处于编辑模式时才会添加实际的输入 HTML 标记。所以我不能使用标准的 getElementById.focus。
如何开始使用 PrimeNG p-table 编辑特定单元格?
我遇到了类似的问题,我找到了适合我的情况的解决方案:
模板:
<p-table
#docDataTable
[value]="frameworkDocumentDataValues"
组件(角度 8):
@ViewChild('docDataTable', {static: false}) private docDataTable: Table;
ngAfterViewInit() {
this.frameworkDocumentDataValues.forEach(row => this.docDataTable.initRowEdit(row));
}
这种方法会导致我们最初所有表格单元格都是可编辑的。我的目标是能够将值直接放入表格中,而无需点击编辑值、确认等按钮......
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)