var 定义data数组,数组里面创建数据,layui表格通过cols的方式将数据渲染到表格上,操作里面有一个新增按钮和删除按钮,新增按钮在倒数第一行第二个空的位置,删除按钮在每行的最后一个列
时间: 2023-06-09 17:06:21 浏览: 342
使用layui 渲染table数据表格的实例代码
的位置。请问,如何实现这个操作呢?
对于这个问题,可以通过以下步骤实现:
1. 在定义 data 数组中,设置一个空对象,用于存储新增数据。在删除数据时,可以将该对象从数组中删除。
2. 在 layui 表格的 cols 属性中,设置操作列,使用 layui 的 lay-event 属性来绑定事件。
3. 在添加数据时,将空对象插入到数组倒数第二个位置。
4. 在删除数据时,通过 lay-event 属性获取当前点击的按钮对应数据的下标,然后使用 splice() 方法从数组中删除该数据。
具体代码实现如下:
// 定义 data 数组
var data = [
{id: 1, name: '张三', age: 20},
{id: 2, name: '李四', age: 30},
{id: 3, name: '王五', age: 40},
{}
];
// 定义表格 cols 配置
var cols = [[
{field: 'id', title: 'ID'},
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄'},
{title: '操作', templet: '#operateTpl'}
]];
// 渲染表格
table.render({
elem: '#demo',
cols: cols,
data: data
});
// 监听新增按钮点击事件
table.on('tool(demo)', function(obj){
var data = obj.data; // 当前点击列的数据
if(obj.event === 'add'){
// 在倒数第二个位置插入空对象
data.splice(data.length - 1, 0, {});
table.reload('demo', {
data: data
});
}
});
// 监听删除按钮点击事件
table.on('tool(demo)', function(obj){
var data = obj.data; // 当前点击列的数据
if(obj.event === 'delete'){
// 获取当前数据在数组中的下标
var index = data.findIndex(item => item.id === obj.data.id);
// 从数组中删除当前数据
data.splice(index, 1);
table.reload('demo', {
data: data
});
}
});
// 定义操作模板
<script type="text/html" id="operateTpl">
<button class="layui-btn layui-btn-sm" lay-event="add">
<i class="layui-icon layui-icon-add-1"></i>
</button>
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">
<i class="layui-icon layui-icon-delete"></i>
</button>
</script>
注意:以上代码是基于 layui 表格进行实现的,具体实现方式可能因项目需求而有所不同。如有疑问请详细阅读 layui 表格文档,或请提供更具体的实现需求。
阅读全文