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>

我对双击处理感兴趣的所有列都包含在具有类单元格内容的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选择数据表单元格

1 个答案: