Layui数据表格动态添加行并跳转至对应页的实现方案

Layui数据表格动态添加行与跳转页的实现

Layui是一款风格优雅的前端UI框架，但因其发布周期较短，部分功能尚未提供现成实现。

在使用Layui数据表格时，遇到如下需求：点击添加按钮后，需在表格末尾动态插入一行。官方未直接提供此功能，需手动实现。

解决思路及方案

解决思路分析

简要分析：针对动态添加一行的需求，直观想法是利用JS或jQuery操作DOM，手动插入tr元素。然而，数据表格每行及单元格的样式复杂，若直接操作DOM，需手动设置与渲染后一致的样式和功能，工作量巨大。因此，需寻求更优方案。

数据表格原始数据来源

数据表格的原始数据来源：参考Layui官方文档，无论是采用方法渲染还是自动渲染生成数据表格，其原始数据均通过直接赋值或异步加载获取。

直接赋值方式下的原始数据实质为一个对象数组，例如[{}, {}, {}, {}, …]。

异步加载方式下，前端向后端发送请求获取数据，后端返回符合Layui数据表格渲染格式的JSON对象。Layui默认支持的后端返回JSON格式如下，各属性具体说明可参照官方文档：

 {
  code: 0, 
  msg: "", 
  count: 1000, 
  data: [] 
 } 

数据表格重载机制

数据表格的重载机制：数据表格重载功能可将新获取的原始数据重新渲染至表格中。Layui提供的方法为table.reload(ID, options)。

ID：指定表格的id属性值。

options：Layui数据表格的基础参数配置，具体含义可参照官方文档。

动态添加一行及跳转页码方案

以下针对原始数据通过直接赋值方式、采用方法渲染的数据表格，提供动态添加一行的思路及解决方法。

思路：基于上述讲解，动态添加一行可转化为以下步骤：

首先获取数据表格中的所有数据，即得到一个对象数组，并在该数组末尾添加一个与现有对象属性相同但所有属性值为空的空对象。（获取表格所有数据的方法可参考我的另一篇Layui数据表格之获取表格中所有的数据）。

随后，利用table.reload(ID, options)方法，将添加了“空对象”的数组重新加载并渲染至数据表格中。

若要跳转至动态添加行所在的页面，只需在table.reload(ID, options)的options参数中设置page基础参数。将page参数的curr属性值设置为动态添加行所在的页码（页码需根据数据表格每页显示记录数及添加一行后的总记录数自行计算）即可。第2、3步代码如下（）：

//获取每页显示的记录数、当前记录总数，计算新添加的记录在第几页
var totalRecord = tableContent.length;
var pageSize = $(".layui-laypage-limits").find("select").val();
if($.type(pageSize) == "string"){
 pageSize = parseInt(pageSize);
}

var currPageNo = Math.ceil(totalRecord / pageSize);
console.log("每页显示的记录数："+pageSize+" 类型："+$.type(pageSize)+" 总的记录数："+totalRecord+" 类型："+$.type(totalRecord)
  +" 新增行所在页码："+currPageNo+" 类型："+$.type(currPageNo));

// 重载表格并跳转到最后修改或者添加数据的那一页
table.reload('viewTable', {
  page : {
   curr : currPageNo
  },
  data : tableContent
});

最终效果图：

动态添加一行前(请将图片保存到本地查看大图)

动态添加一行后(请将图片保存到本地查看大图)

以上这篇Layui给数据表格动态添加一行并跳转到添加行所在页的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。