layui表格编辑单元格时直接点击保存按钮问题
问题:
最近做个数据表格,里面用到编辑单元格的工单,然后碰到个问题,表格用的是layui的表格。表格有自带的编辑单元格的方法。
我需要对编辑完的数据进行校验,layui提供了监听单元格编辑的方法。但是这个方法只有在单元格编辑完成之后才触发,也就是说
当你在编辑单元格的时候输入数据后直接回车会触发单元格编辑完成的事件,或者当你编辑完让此单元格失去焦点后触发,但这有个前提条件
就是单元格里输入有效值才会触发。我做的是当单元格失去焦点后触发事件,然后对输入的数据进行校验。然做相应的处理。问题是如果单元
格此时未失去焦点,然后直接点击保存按钮,那么提交到后台的就是未被校验过的数据。那么保存的也就是错误的数据。
解决思路:
如果当编辑的单元格的内容发生改变就能触发layui提供的方法的话,这个问题也就好解决了,但是我没有找到这个方法。如果哪位大佬碰到了,还请指教
一下。后来通过分析编辑单元格时的页面的源代码发现,当编辑单元格的时候,页面会增加一个input框,这个input就是当前需要编辑的输入框,而且
还有一个样式。看下图
然后我打算根据这个class监听这个编辑框有没有失去焦点,换句话说就是当这个编辑的input获取焦点的时候,直接将保存按钮置灰,等编辑框失去焦点后
再将保存按钮设置为可点击的状态。这样问题就解决了,校验也会触发,避免了