创建layui表格,在最后第一行第二列新增一个新增按钮(完整代码,包括javscript和html)
时间: 2024-05-15 15:17:54 浏览: 172
使用layui 渲染table数据表格的实例代码
好的,以下是创建 layui 表格,在最后第一行第二列新增一个新增按钮的完整代码:
HTML代码:
```html
<table id="demo" lay-filter="test"></table>
```
JavaScript代码:
```javascript
layui.use('table', function(){
var table = layui.table;
//构造表格
table.render({
elem: '#demo',
height: 315,
url: '/demo/table/user/',
cols: [[
{field:'id', title:'ID', width:80},
{field:'username', title:'用户名', width:120},
{field:'email', title:'邮箱', minWidth:150},
{field:'sex', title:'性别'},
{field:'city', title:'城市', minWidth:100},
{field:'sign', title:'签名', minWidth:100},
{field:'experience', title:'积分', sort: true},
{field:'score', title:'评分', sort: true},
{field:'classify', title:'职业', minWidth:100},
{field:'wealth', title:'财富', sort: true},
{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150} //这里是操作列,我们在这里添加新增按钮
]]
});
//监听工具条
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'detail'){
layer.msg('ID:'+ data.id + ' 的查看操作');
} else if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){
layer.alert('编辑行:<br>'+ JSON.stringify(data))
}
});
//这里是我们添加的事件,当单击新增按钮时将添加一行数据
$('#demo .layui-table-fixed-l .layui-table-body tbody').on('click', 'tr:last-child td[data-field="wealth"]', function() {
var json = {
id: Math.floor(Math.random()*10000),
username: 'test'+Math.floor(Math.random()*100),
email: 'test'+Math.floor(Math.random()*100)+'@example.com',
sex: '男',
city: '上海',
sign: '',
experience: Math.floor(Math.random()*100),
score: Math.floor(Math.random()*100),
classify: '作家',
wealth: Math.floor(Math.random()*1000)
};
table.append('#demo', [json]);
});
});
```
需要注意的是,layui 表格的操作列是通过 `toolbar` 属性来添加的,我们要在该属性中添加一个新增按钮,可以参考代码中的示例。同时,我们还需要绑定一个单击事件,在该事件中添加一行数据。可以参考示例代码中的事件绑定方式。
阅读全文