写一个layui表格带新增功能,点击新增创建空的列
时间: 2024-04-30 15:17:24 浏览: 77
好的,您可以按照以下代码实现:
```html
<table class="layui-table" id="test">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>18</td>
<td>北京</td>>
<td>
<button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
<button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>
</td>
</tr>
</tbody>
</table>
<script>
layui.use(['table', 'layer'], function(){
var table = layui.table;
var layer = layui.layer;
// 新增数据
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'add':
var data = {
name: '',
age: '',
city: '',
id: new Date().getTime()
}
var newData = checkStatus.data;
newData.push(data);
table.reload('test', {
data: newData
});
break;
}
});
// 渲染表格
table.render({
elem: '#test',
height: 315,
data: [{
name: '小明',
age: 18,
city: '北京',
id: 1
}],
toolbar: '#toolbarDemo',
cols: [[
{field:'name', title:'姓名', edit: 'text'},
{field:'age', title:'年龄', edit: 'text'},
{field:'city', title:'城市', edit: 'text'},
{fixed: 'right', title:'操作', toolbar: '#barDemo'}
]],
page: true
});
// 监听单元格编辑事件
table.on('edit(test)', function(obj){
var value = obj.value; //修改后的值
var data = obj.data; //所在行的所有数据
var field = obj.field; //修改的字段名称
layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为:'+ value);
});
// 监听工具条事件
table.on('tool(test)', function(obj){
var data = obj.data; //获得当前行数据
if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
layer.close(index);
});
} else if(obj.event === 'edit'){
//编辑
}
});
});
</script>
```
这段代码将会创建一个包含新增功能的 layui 表格,新增按钮位于表格上方的 toolbar 中,点击新增按钮后会在表格最后一行创建空的列,点击单元格进行编辑后可进行数据修改。
阅读全文