关于layui:layui-table解决表格的数据和界面不一致

21次阅读

共计 773 个字符,预计需要花费 2 分钟才能阅读完成。

问题形容:

layui 表格渲染时因为异步申请数据问题,当用户短时间内频繁申请数据或者短时间外在表格获取数据期间又去抉择其余条件进行从新查问,就很可能就会导致表格中的数据和想要的数据不统一,甚至还会造成点击表格详情时获取的数据和界面上的数据不统一,而后跳转的页面的数据不对。

解决

解决方案是限度用户短时间内频繁对表格数据查问,得出以下几个计划:

1. 对申请进行防抖
2. 当申请前立刻对前一个未实现的雷同申请进行abort 打断
3. 申请前对查问按钮disable,申请实现时才可点击
4. 申请前弹出加载层挡住界面,让用户期间不可操作, 当done 渲染实现再敞开加载层

这里咱们应用第 4 种办法,对表格申请进行一个公共的封装,在表格申请数据前弹出 layui 的加载层来避免用户持续操作,保留加载层的 id(tableIdx)来进行敞开,对表格加载实现的回调进行一个包装,而后在表格数据申请实现时敞开加载层,敞开加载层代码:

 if (paramsOBJ.parseData) {
      var parseData = paramsOBJ.parseData
      paramsOBJ.parseData = function (res) {layer.close(window.tableIdx);
        return parseData(res)
      }
    }
    if (paramsOBJ.done) { // 二次封装 done 渲染实现敞开加载层
      var done = paramsOBJ.done;
      paramsOBJ.done = function (res, curr, count) {layer.close(window.tableIdx);
        return done(res, curr, count);
      };
    } else {paramsOBJ.done = function (res, curr, count) {layer.close(window.tableIdx);
      }
正文完
 0