创建layui表格,在最后第一行第二列新增一个新增按钮
时间: 2024-04-19 13:04:08 浏览: 101
可以使用以下代码来实现:
```javascript
//获取表格对象
var table = layui.table;
//渲染表格
table.render({
elem: '#demo',
//其他参数
//……
//……
done: function(res, curr, count) {
//在最后一行添加按钮
var lastTr = $(".layui-table-body table tbody tr:last-child");
lastTr.find("td").eq(1).after('<td><button class="layui-btn layui-btn-sm layui-btn-normal addBtn">新增</button></td>');
}
});
//监听新增按钮点击事件
$(document).on("click", ".addBtn", function() {
//执行新增操作
//……
});
```
其中,`#demo` 是表格的容器,`done` 函数在表格渲染完成后会被调用,可以在该函数中添加新增按钮。新增按钮的点击事件可以用 `$(document).on("click", ".addBtn", function() {})` 来监听。
相关问题
创建layui表格,在最后第一行第二列新增一个新增按钮(完整代码,包括javscript和html)
好的,以下是创建 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` 属性来添加的,我们要在该属性中添加一个新增按钮,可以参考代码中的示例。同时,我们还需要绑定一个单击事件,在该事件中添加一行数据。可以参考示例代码中的事件绑定方式。
var 定义data数组,通过cols方式创建layui表格,里面有一个新增功能,新增按钮位置在最后一行第二列
好的,谢谢你的提醒,我明白了。针对你的问题,我认为你需要在cols参数中定义一个工具栏,并在其中添加一个按钮,代码如下:
```
var data = [
{id: 1, name: '张三', age: 18},
{id: 2, name: '李四', age: 20},
{id: 3, name: '王五', age: 22},
];
var cols = [[
{field: 'id', title: 'ID', width: 80},
{field: 'name', title: '姓名', width: 120},
{field: 'age', title: '年龄', width: 80},
{fixed: 'right', align: 'center', toolbar: '#table-toolbar'}
]];
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#table',
data: data,
cols: cols
});
table.on('toolbar(table)', function(obj){
if(obj.event === 'add'){
var newData = {id: data.length+1, name: '', age: ''};
data.push(newData);
table.reload('table', {
data: data
});
}
});
});
```
解释一下代码,首先我们定义了一个数据源data和一个表格列的配置cols,其中新增功能的按钮位置在最后一行第二列,因此我们在cols的参数中添加一个工具栏toolbar,然后在该工具栏中添加一个按钮。接着使用layui的table模块渲染表格,并且监听表格toolbar中的按钮点击事件,当新增按钮被点击时,我们向数据源中加入一个新的空数据,并使用table.reload()方法重新加载表格。
希望我的回答对你有所帮助,如果你有其他的问题或疑问,欢迎随时向我提问。
阅读全文