PrimeNG select 数据表单元格

Question

我正在使用 Angular 4 和 PrimeNG 开发一个项目，我需要能够双击一个单元格，选择它并打开一个对话框来对单元格的基础数据进行一些修改。

据我从文档中看到的，目前还没有办法做到这一点。处理这种情况的最佳方法是什么？

谢谢。

Answer 1

所以经过一番尝试后，我想出了一个解决方案，在我们等待 PrimeNG（顺便说一句，我喜欢它）的人包括这个功能时，这个解决方案远非完美。

第一个问题是确定用户双击了哪个单元格。我通过将所有列的模板放在 div 中来做到这一点，我可以参考：

<p-dataTable #grd [value]="view" 
               (onRowDblclick)="editTemplate($event)" 
               (onRowClick)="clearSelection($event)">
        <p-column field="SomeFieldName" header="Header" [editable]="false">
            <ng-template let-col let-data="rowData" pTemplate="body">
                <div [id]="col.field" class="cell-content">
                    <div [innerHTML]="data[col.field]" class="center-parent-screen"></div>
                </div>
            </ng-template>
        </p-column>

我有兴趣在双击时处理的所有列都包含在具有 class 单元格内容的 div 中。还要注意 id 属性。它被设置为匹配字段。然后在onRowDblclick事件中：

editTemplate(e: any) {
        let target = e.originalEvent.toElement.closest('div.cell-content');
        if (target && target.id) {
            let td = target.closest('td');
            if (td) {
                td.style.backgroundColor = 'darkorange';
                td.style.color = 'white';
            }

            let fieldValue = e.data[target.id];
            //do something with this data
        }
    }

这里的关键是id属性。一旦我们有了它，我们就知道点击了哪个单元格，我们可以继续做我们需要做的事情。另请注意，我获得了父 TD 元素的引用并设置了单元格的背景和颜色。使用完后，您可以清除格式以恢复正常。

您还可以使用 onRowClick 事件来清除选择，如下所示：

    clearSelection(e: any) {
        let target = e.originalEvent.toElement.closest('div.cell-content');
        if (target && target.id) {
            let td = target.closest('td');
            if (td) {
                td.style.backgroundColor = 'white';
                td.style.color = 'black';
            }
        }
    }

我知道直接操作 DOM 不是可行的方法，但在我们获得包含此功能的新版本 PrimeNG 之前，至少对我来说是这样。

如果你有更好的方法，请告诉我。

PrimeNG select 数据表单元格

PrimeNG select datatable cell

primeng

primeng-datatable