通过clos创建layui表格,自定义data里面的数据,表格用于删除和新增功能,新增位置在最后一行第二列的位置,前面包含索引
时间: 2023-06-09 12:06:59 浏览: 88
非常感谢您对ChitGPT的信任!针对您的问题,您可以参考如下代码实现:
```
// 绑定关闭事件,以便于在在关闭layui表格时执行一些特定的操作
window.onunload = function() {
layui.table.clearCache('table_id');
};
layui.use(['table', 'form'], function() {
var table = layui.table,
form = layui.form,
tableData = [
{id: '1', name: 'John Doe', age: 28},
{id: '2', name: 'Jane Doe', age: 34},
{id: '3', name: 'Max Doe', age: 17},
{id: '4', name: 'Sam Doe', age: 45},
{id: '5', name: 'Alex Doe', age: 22},
{id: '6', name: 'Mark Doe', age: 31},
{id: '7', name: 'Alice Doe', age: 26},
{id: '8', name: 'Chris Doe', age: 39},
{id: '9', name: 'Julia Doe', age: 43},
{id: '10', name: 'Peter Doe', age: 52},
];
// 初始化表格
table.render({
elem: '#table_id',
data: tableData,
cols: [[
{field: 'id', width: 80, title: '索引', sort: true},
{field: 'name', title: '姓名', edit: 'text'},
{field: 'age', width: 80, title: '年龄', edit: 'text'},
{fixed: 'right', width: 160, align: 'center', toolbar: '#toolbar_id'},
]],
// 默认排序
page: {
limit: 50,
limits: [50, 100, 200],
},
autoSort: false,
});
// 监听行工具栏事件
table.on('tool(table_filter)', function(obj) {
var data = obj.data;
if (obj.event === 'delete') {
layer.confirm('确定删除该行数据?', function(index) {
obj.del();
layer.close(index);
});
} else if (obj.event === 'add') {
var newId = parseInt(tableData[tableData.length - 1].id) + 1;
var newRow = {id: newId.toString(), name: '', age: ''};
tableData.push(newRow);
table.reload('table_id', {data: tableData, done: function(){
var lastIndex = tableData.length - 1;
var target = $(obj.tr).parents('table').find('tr[data-index="' + lastIndex + '"]');
var targetDom = target.find('td').eq(1).find('.layui-table-edit');
targetDom.click();
}});
}
});
});
```
上述代码中,我们创建了一个包含删除和新增功能的layui表格,其中新增功能是在最后一行第二列的位置,前面包含索引。点击新增后,会在表格的数据集中添加一行,同时刷新表格来呈现新的行,定位到新加入的行的姓名列,并激活它的编辑状态。
希望能对您有所帮助,如有任何疑问或者需要进一步帮助,请随时联系我!
阅读全文