乐趣区

关于easyUi-dataGrid行内删除报cannot-read-property-xxx-of-undefined的问题

问题场景:

ui 给的界面上是在行内做删除,比如有一列叫“操作”的列,里面有个按钮,点击可以删除该列。只做前端删除……
然后出现问题报错:

`cannot read property 'xxx' of undefined`

查找问题:

通过断点发现,这个错是在 onClickCell 方法时返回的。大致代码是这样的, 忽略参数,因为不同的行,不同的项目这里是不一样的

 var row=opts.finder.getRow(xxx,yyy) ;
 // 省略若干……
 opts.onClickCell.call(xxx,yyy,row[xxx]); 

错误就是最后一行报的, 然而根源在第一行,row 没有正常获取到,断点发现,获取到的是 undefined,当然取 row[xxx] 是取不到的,要报错。

那么问题来了,我点了一下按钮,为什么会触发这个函数,查文档发现,这个函数是点击单元格的时候触发的函数。问题显而易见,其实就是点击按钮,事件冒泡到点击单元格方法上。此方法被触发的时候,该行已经被删除,所以 row 为 undefined, 从而导致这个问题。

解决问题

解决问题就很简单了吧,阻止事件冒泡即可,按钮 onclick 上传入 event, 然后事件中 event.stopPropagation() 即可解决。

总结一下

网上找了一圈,没看到靠谱的解决方式,什么重载数据啥啥的都试过了,并没有什么卵用。所以伸手党不好啊,还是要自己调试解决问题。

另外,《JavaScript 高级程序设计》中关于 ”DOM 事件流 ”, 说了三个阶段。事件捕获阶段,处于目标阶段和事件冒泡阶段。一个事件的触发,从 DOM 顶层即 document 开始一层一层的寻找触发元素,这就是捕获阶段。

寻找到具体元素之后,就是处于目标阶段,我们的事件绑定的函数运行实际就是这个阶段,然后这一步走完了之后,就会去冒泡,看看父元素,祖父乃至更高层元素会不会有同样的事件触发。需要注意的是,冒泡是在处于目标阶段完成之后才会进行。

回到我们问题上来,就是我们先把行给删除了,然后冒泡到上层的函数才去获取行,当然是拿不到,从而导致错误发生。

退出移动版