layui表格编辑单元格时直接点击保存按钮问题

layui表格编辑单元格时直接点击保存按钮问题

问题：

最近做个数据表格，里面用到编辑单元格的工单，然后碰到个问题，表格用的是layui的表格。表格有自带的编辑单元格的方法。

我需要对编辑完的数据进行校验，layui提供了监听单元格编辑的方法。但是这个方法只有在单元格编辑完成之后才触发，也就是说

当你在编辑单元格的时候输入数据后直接回车会触发单元格编辑完成的事件，或者当你编辑完让此单元格失去焦点后触发，但这有个前提条件

就是单元格里输入有效值才会触发。我做的是当单元格失去焦点后触发事件，然后对输入的数据进行校验。然做相应的处理。问题是如果单元

格此时未失去焦点，然后直接点击保存按钮，那么提交到后台的就是未被校验过的数据。那么保存的也就是错误的数据。

解决思路：

如果当编辑的单元格的内容发生改变就能触发layui提供的方法的话，这个问题也就好解决了，但是我没有找到这个方法。如果哪位大佬碰到了，还请指教

一下。后来通过分析编辑单元格时的页面的源代码发现，当编辑单元格的时候，页面会增加一个input框，这个input就是当前需要编辑的输入框，而且

还有一个样式。看下图

然后我打算根据这个class监听这个编辑框有没有失去焦点，换句话说就是当这个编辑的input获取焦点的时候，直接将保存按钮置灰，等编辑框失去焦点后

再将保存按钮设置为可点击的状态。这样问题就解决了，校验也会触发，避免了有问题的数据提交到后台。

//监听工具条
        forecastTable.on('tool(Table_forecast)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            //监听输入框编辑禁用点击按钮
            $("#btu").attr("disabled", true);
            $("#btu").addClass('layui-btn-disabled');
            $(".layui-table-edit").blur(function () {
                //监听输入完成 保存按钮可用
                $("#btu").removeClass('layui-btn-disabled');
                $("#btu").attr("disabled", false);
            })

        });

layui编辑单元格的事件是等编辑完成后才会触发，所以上面的代码就是当用户点击单元格后就会触发这个方法，同时单元格也会进入编辑的状态。然后监听当前编辑的单元格的失去焦点的事件。然后做相应的处理。

然后再layui提供的单元格编辑完成后触发的事件中对用户输入的数据进行处理。这样问题就解决了。

我没有监听编辑单元格的那个获取焦点的事件的原因是，当代码运行的时候这个元素还没有被渲染出来，监听不到，所以我给这个单元格填了一个自定义的事件。然后去监听。

---------------------------- end ----------------------------