让Layui数据表格增删改更加有用户体验

基于layui开发

增

---

增加一条数据就是点击添加，弹出一个open层，然后填写数据，最后点击提交。或者不填关掉这个弹层。当是直接关掉的操作，不需要对表格进行刷新。当我们提交了信息时，直接对表格进行重载并且跳到第一页就好了。一般最新添加的数据都显示在第一条。

改

---

改是最方便的操作了，我的做法是在弹层的end回调函数中添加模拟点击确定按钮的事件，这样体验挺好的。

$(".layui-laypage-btn").trigger('click');

删

---

删除就要稍微想想了。我的做法是在表格刚开始render的done方法中记录页面数据量和页码

done: function(res, curr, count) {
  localStorage.setItem("dataLength", res.data.length);
  localStorage.setItem("curr", curr);
}

然后在后面的删除操作中进行判断

对于单个删除，只要页面的数据量大于1，删除成功后也是使用模拟点击确定按钮，这样就很方便。当你的页面数据只有一个时，就要跳转到前一页。批量删除也是一样

if (localStorage.getItem("dataLength") == 1) {
  table.reload('user-table', {
    url: '/goods/list',
    where: {},
    page: {
      curr: localStorage.getItem("curr") - 1 
    },
    method: 'post'
  });
} else {
  $(".layui-laypage-btn").trigger('click');
}

---

当我自己写文章的时候才发现，写文章真的不简单，要输出足够多的内容也不是一件容易的事。不知道你们有什么想法，能更有用户体验，请告诉大家。