Click the button below the layui table to add a new blank row
1. First upload the code
- html interface code
- js code
Two, code analysis
This is just my personal code analysis, if you want to get more details, please go to layui official website
- Analysis of the first picture
<table class="layui-hide" id="economicPersonnel-table" lay-filter="economicPersonnel-table"></table>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<!-- <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>-->
<!-- <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>-->
<!-- <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
<button class="layui-btn layui-btn-sm" lay-event="addTable">增加</button>
</div>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 1. table标签中的id和 lay-filter 的值是用于下面的layui中js调用的
2.javaScript 中的id,也是要用于 下面的layui中进行js调用
3.id为'toolbarDemo' 的 javaScript代码下的div,class中的命名规则是调用layui中的按钮组合
详细信息去官网查看.下面的'button'按钮中class也是调用的layui样式.lay-event这个属性
的值为自己添加填写,是需要在后面调用事件方法的.
4.id为'barDemo'的javaScript代码是在后面表格中的样式增加单行删除按钮
-->
- Analysis of the second picture
<script>
let cols = [
[
{
type: 'checkbox'},
{
title: '项目参与人员表id', field: 'id', align: 'center', hide: true},
{
title: '项目参与人员表requestid', field: 'requestid', align: 'center', hide: true},
{
title: '项目参与人员表nodeid', field: 'nodeid', align: 'center', hide: true},
{
title: '项目参与人员表rowindex', field: 'rowindex', align: 'center', hide: true},
{
title: '参与人员', field: 'name', align: 'center', edit: 'text'},
{
title: '联系方式', field: 'telphone', align: 'center', edit: 'text'},
{
title: '操作', toolbar: '#barDemo', align: 'center'}
]
];
// 指定一个cols变量,后面表格样式直接进行调用,更改的话也更为方便
// 这里只解释最后一行 操作这个点,toolbar中的,是调用第一张图片中的指定的一个id的JavaScript代码
// 后面的其余操作去layui官网去查看
</script>
- Analysis of the third picture
<script>
//人员明细表
table.render({
elem: '#economicPersonnel-table',
// url: null,
url: 'list',
method: 'get',
cols: cols,
skin: 'line',
toolbar: '#toolbarDemo',
});
//工具栏事件
table.on('toolbar(economicPersonnel-table)', function (obj) {
switch (obj.event) {
case 'addTable'://添加一行
if (obj.event === 'addTable') {
var oldData = table.cache["economicPersonnel-table"];
var data1 = {
"name":"",
"telphone":""
};
//添加
oldData.push(data1);
console.log(oldData)
//刷新
table.reload('economicPersonnel-table', {
url: '',
data: oldData
});
}
}
;
});
//监听行工具事件
table.on('tool(economicPersonnel-table)', function (obj) {
var data = obj.data;
//console.log(obj)
if (obj.event === 'del') {
layer.confirm('真的删除行么', function (index) {
obj.del();
layer.close(index);
});
}
});
</script>
3. Implement business logic analysis
Need to use fake data to add blank rows. When refreshing the page, you need to get the data of the previous table, and then refresh after adding rows.
4. Page display
