Layui给数据表格动态添加一行并跳转到添加行所在页的方法-创新互联

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

笔者在使用Layui的数据表格的时候，需求是这样的：当点击添加按钮的时候，就在数据表格最后动态添加一行。上述功能官方并没有给出实现，需要自己手动解决。

解决思路及方案

简单分析：根据需求——动态添加一行，首先想到的是利用JS/jQuery操作DOM对象实现在数据表格table中手动添加一个tr，但由于数据表格的每一行的每一个单元格都有其样式，因此，要想动态添加的一行与Layui数据表格渲染出来的每一行样式及功能一样，就必须给tr设置和渲染出来的每一行一样的样式，利用jQuery去完成这个添加这样一个tr工程量实在太大了，因此需要换一种方案。

数据表格中的原始数据：查看Layui官方文档，采用方法渲染或者自动渲染的方式去生成数据表格时，数据表格中的数据是通过直接赋值的方式或者异步加载的方式获得原始的数据。

直接赋值方式原始的数据其实就是一个对象数组，如[{}, {}, {}, {}, …]。

异步加载方式原始的数据发请求从后端取，然后后端返回给前端的一个json对象，这里要求后端返回给前端的json对象要符合Layui数据表格能渲染的格式，Layui数据表格默认支持的后端返回给前端的json对象格式如下，各个属性具体描叙参照官方文档：

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

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。