首页
后端开发
C#
LayUI table插入空白行功能

LayUI table插入空白行功能

0 次浏览 0 条评论
rar
rar

LayUI 的 table 模块用着挺顺手的，尤其在做后台管理时。但有时候吧，为了加点视觉缓冲，或者放点提示信息，你就想插个空白行进去。嗯，问题来了，LayUI 官方居然没这功能，只能自己动手丰衣足食了。

table 的done事件挺好用，数据加载完之后你就能操作表格数据，刚好是插入空白行的好时机。你可以写个addBlankRow函数，把空白对象塞进数组，用table.reload重新渲染。简单粗暴，但效果还不错。

比如下面这样：

layui.use('table', function () {
  var table = layui.table;
  table.render({
    elem: '#demo',
    url: 'your-api-url',
    cols: [[
      {field: 'id', title: 'ID', width: 80},
      {field: 'name', title: '姓名', width: 120}
    ]],
    done: function (res, curr, count) {
      addBlankRow(res.data);
    }
  });


function addBlankRow(data) {
    for (var i = 0; i < 2>

空白行怎么插、插几行，你自己控制。注意哦，如果你还依赖后端数据，就要考虑前后端数据同步的问题。直接操作前端数据这招，适合前端自己玩数据的时候。如果你怕 LayUI 后续更新影响这段代码，记得备份一下tables.js。

如果你对这个方法感兴趣，建议看看项目里的新增空白行方法.txt和图片.jpg，对照理解更快。要是你平常喜欢定制交互细节，这招你会挺常用的。

rar 文件大小：44.26KB