1、利用JS、jQuery *** 作DOM对象实现在数据表格table中手动添加一个tr。
2、动态添加的一行与Layui数据表格渲染出来的每一行样式及功能一样，必须给tr设置和渲染出来的每一行一样的样式，利用jQuery去完成这个添加这样一个。
1
第一步在我们的电脑上打开软件，新建一个html，并添加上layui的js和css文件，如下图所示：
2
第二步我们打开新建的html文件,在<head>标签里面引入layui.css，layui.js文件，如下图所示：
3
第三步我们开始写body页面内容，这里给的表格内容是layui的表格示例数据，如下图所示：
4
第四步我们最后来给表格数据添加点击事件，table.on('tool(demoEvent)', function(obj){}来监听单元格事件，layer.prompt()d出框，使用 obj.update({ sign: value })进行更新表格和缓存，如下图所示：
5
第五步我们在浏览器中打开html页面，可以看到表格数据内容，如下图所示：
6
第六步我们点击表格数据内容，d出框显示单元格里面的数据，可以看到通过layui，给表格数据添加了点击事件，如下图所示：
最近有个需求，实现前端页面一个数据表格可编辑，随原页面的表单提交json数据，然后后端回传显示。Layui原来也没怎么用过，记个笔记记录一下。
添加行的有个小bug，超过分页行数后，再添加会变成无数据。所以只好初始设置分页为50。
另外，搞了个隐藏的标签随表单一起提交：
从数据表格的缓存中获取表格内输入的值放入标签：
这个之前从table的缓存中提取得到提交的json串含有Layui数据表格的索引，回传Layuitable显示的时候不需要，需要去掉。所以后端用了个正则表达式去除。
为了满足layui数据表格的返回格式，封装了一下数据格式。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）