angular – p-dataTable行上的鼠标悬停事件(primeNg)

发布时间：2020-12-17 18:06:02 所属栏目：安全来源：网络整理

导读：我目前正在使用angular2开发Web应用程序的用户界面.我有一个p-dataTable组件(primeNG),当鼠标在这个p-dataTable的一行上时,我想调用一个函数.该函数应检索触发鼠标悬停事件的行的数据. 如果你有任何想法如何使用p-dataTable处理鼠标悬停事件,我将很高兴知道

我目前正在使用angular2开发Web应用程序的用户界面.我有一个p-dataTable组件(primeNG),当鼠标在这个p-dataTable的一行上时,我想调用一个函数.该函数应检索触发鼠标悬停事件的行的数据.

如果你有任何想法如何使用p-dataTable处理鼠标悬停事件,我将很高兴知道解决方案:)

先感谢您.

解决方法

你的要求必须鼠标悬停？我问,因为你可以使用内置的点击事件,鼠标悬停不是一个非常适合移动设备的行为(如果你有任何关注的话).

如果你必须使用鼠标悬停,我认为没有任何内置功能,但你可以下载源代码然后将数据表组件放入你的项目中(可能会重命名它并确保在你的应用程序中更改导入.对于数据表组件的module.ts,编辑datatable.ts文件(如下所示：https://github.com/primefaces/primeng/blob/master/src/app/components/datatable/datatable.ts)

并劫持模板中的(mouseenter)=“hover = true”(mouseleave)=“hover = false”事件并将您自己的函数放在那里以执行您想要的操作,例如：

(mouseenter)=“showRowData($event)”(mouseleave)=“hideRowData($event)”

类似的东西.就实际的数据显示而言,您必须决定您希望它的外观,然后相应地实现它[范围超出此范围].

我不知道这是不是最好的方式,但我认为这样可行.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!