Layui向数据表动态添加一行并跳转到添加该行的页面的方法

Layui是一个前端ui框架，风格优雅。但是由于发布时间短，很多功能没有实现。

当我使用Layui的数据表时，需求如下：当我点击添加按钮时，我会在数据表的末尾动态添加一行。以上功能没有正式实现，需要手动解决。

解决方案和解决方案

简单分析：根据需求——，动态添加一行。首先想到的是用JS/jQuery操作DOM对象，在数据表表中手动添加一个tr。但是，由于数据表每行中的每个单元格都有自己的样式，如果动态添加的行与Layui数据表渲染的每一行具有相同的样式和功能，则需要为tr设置与渲染的每一行相同的样式，并使用jQuery来完成这种添加。

数据表中的原始数据：在查看Layui的正式文档并通过方法渲染或自动渲染的方式生成数据表时，数据表中的数据是通过直接赋值或异步加载的方式获取的。

直接赋值的原始数据实际上是一个对象数组，比如[{}，{}，{}，{}，].

在异步加载模式下，原始数据请求从后端获取，然后后端返回到前端的一个json对象。这里要求从后端返回到前端的json对象应该符合Layui数据表可以呈现的格式。默认情况下，Layui数据表支持的从后端返回到前端的json对象的格式如下。关于每个属性的具体描述，请参考官方文件：

{code: 0，msg: ' '，count: 1000，data: []}数据表重载：数据表重载可以将新获取的原始数据重新渲染到数据表中，Layui提供的方法是table.reload(ID，options)

Id:表的id属性值

选项：Layui数据表的基本参数，详见官方文件

下面给出了通过对原始数据直接赋值的方法动态地向呈现的数据表添加一行的思想和解决方案

思考：通过上面的解释，动态添加一条线实际上可以转化为：

获取数据表中的所有数据后，即获取一个对象数组，在该对象数组的末尾添加一个空对象，该对象与对象数组中的对象相同，但其所有属性的属性值都是空的。(数据表中的所有数据可以参考我的另一个Layui数据表的采集表中的所有数据)

使用table.reload(ID，options)方法将带有“空对象”的数组重新加载并呈现到数据表中。

跳转到动态添加行所在的页面，只需在table.reload(ID，options)中设置options的页面基本参数，将page参数的curr属性值设置为动态添加行的页码(页码根据数据表每页显示的记录数和添加一行后数据表中的记录总数计算)。步骤2和3的代码如下():

//获取每页显示的记录数和当前记录总数，计算新增记录所在的页面var total record=table content . length；var pageSize=$('。layui-laypage-limits ')。查找('选择')。val()；if($。type(PageSize)==' string '){ PageSize=ParSeint(PageSize)；} var currPageNo=math . ceil(total record/page size)；Console.log('每页显示的记录数：' pageSize '类型：' $。type(pageSize)'记录总数：' totalRecord '类型：' $。键入(totalRecord)'新行的页码：“currPageNo”类型：“$”。类型(currPageNo))；//重新加载表并跳转到上次修改或添加数据的页面。reload ('view table '，{ page : { curr : curr page no }，data : table content })；最终效果图：

在动态添加一行之前(请将图片保存在本地以查看更大的图像)

动态添加一行后(请将图片保存在本地，以查看更大的图像)

以上动态向数据表添加一行并跳转到添加该行的页面的方法是边肖与大家分享的所有内容。希望能给大家一个参考，多多支持我们。