PrimeFaces DataTable重写onRowClick后行选中失效问题
问题描述
需要为特定DataTable重写onRowClick函数,此前用同类逻辑重写Tree组件时功能运行正常,但套用相同写法重写DataTable后,行选中功能出现异常,暂未定位问题原因。
原实现代码如下:
PF('myTableWidget').onRowClick = function (event, rowElement, silent) { //do some stuff PrimeFaces.widget.DataTable.prototype.onRowClick.call(event, rowElement, silent); };
故障原因
代码存在两个核心错误:
Function.prototype.call()的第一个参数是函数执行时要绑定的this上下文,原写法错误传入event事件对象,导致原型onRowClick方法执行时,内部this指向事件对象而非DataTable组件实例,组件内部依赖this读取的选中状态、配置项、DOM引用全部失效。- 上下文参数之后传入的实参需要和原方法的形参一一对应,原写法漏传了
event参数,导致原型方法接收到的参数顺位完全错位,进一步触发功能异常。
此前Tree组件重写后能正常运行属于巧合,写法本身不符合规范。
修复方案
修正call的上下文绑定和参数传递即可,修复后代码如下:
PF('myTableWidget').onRowClick = function (event, rowElement, silent) { // 自定义业务逻辑 PrimeFaces.widget.DataTable.prototype.onRowClick.call(this, event, rowElement, silent); };
提示:重写PrimeFaces组件原型方法时,只要调用原原型方法,都要保证
call第一个参数传入当前组件实例this,后续实参严格按照原方法的形参顺序传入,避免出现上下文丢失、参数错位的问题。
内容的提问来源于stack exchange,提问作者Neo
相关产品推荐
相关产品推荐

