问题描述:

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);
      }
03-05 15:48