写一个layui表格,数据通过定义data数组通过clos方式,渲染上去,有一个新增按钮,位置在倒数第一行,第二个列
时间: 2024-05-08 22:18:39 浏览: 107
好的,让我帮您回答这个问题。以下是一个实现您所描述的功能的 layui 表格代码:
```
<table id="demo" lay-filter="test"></table>
<script>
layui.use(['table'], function() {
var table = layui.table;
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', title:'操作', toolbar:'#barDemo', width:150}
];
table.render({
elem: '#demo',
data: data,
cols: [cols],
page: true
});
//监听工具条
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'edit'){
//编辑操作
} else if(obj.event === 'del'){
//删除操作
}
});
//监听新增按钮
$('#addBtn').on('click', function(){
var tableData = table.cache.demo;
var newData = {id: tableData.length + 1, name: '', age: ''};
tableData.push(newData);
table.reload('demo', {
data: tableData
});
});
});
</script>
<!-- 表格操作列 -->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 新增按钮 -->
<button id="addBtn" class="layui-btn">新增</button>
```
解释一下上面的代码。首先,我们创建了一个空的表格,设置了它的 id 和 lay-filter 属性。
接下来,定义了数据数组 data 和列配置数组 cols。
然后,使用 layui 的 table 模块的 render 方法将表格渲染出来,传入 data 和 cols,以及开启分页功能。
在渲染后,我们监听了表格的工具条事件,以便后续对编辑或删除进行操作。同时,我们也监听了新增按钮的点击事件,当点击新增按钮时,将新增一行数据在表格上方插入。
最后,我们还定义了一个表格操作列和新增按钮的 HTML 模板,这部分比较简单,就不再解释了。
希望这个示例能够帮到您,如果有问题,请随时问我。
阅读全文