写一个layui表格,数据通过定义data数组通过clos方式,渲染上去,表格有一个新增按钮,新增按钮位置永运处于倒数第一行,第二个列
时间: 2024-05-01 07:19:35 浏览: 21
好的,我可以帮你回答这个问题。
首先,你需要引入 layui 的库文件和样式表。然后,创建一个 HTML 页面,并在页面中定义一个表格和一个新增按钮。
接下来,在 JavaScript 中定义一个 data 数组,并初始化数据。然后,使用 layui 的表格模块,将 data 数组中的数据渲染到表格中。
最后,在表格的最后一行第二列添加一个新增按钮,并绑定一个点击事件,用于添加新的数据到 data 数组中,并重新渲染表格。
下面是示例代码:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格示例</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
</head>
<body>
<table id="demo" lay-filter="demo"></table>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<script src="index.js"></script>
</body>
</html>
```
JavaScript:
```js
// 初始化数据
var data = [
{id: 1, name: '张三', age: 18, sex: '男'},
{id: 2, name: '李四', age: 20, sex: '女'},
{id: 3, name: '王五', age: 22, sex: '男'}
];
layui.use('table', function(){
var table = layui.table;
// 渲染表格
table.render({
elem: '#demo',
data: data,
cols: [[
{field: 'id', title: 'ID', width: 80, sort: true},
{field: 'name', title: '姓名', width: 120},
{field: 'age', title: '年龄', width: 80, sort: true},
{field: 'sex', title: '性别', width: 80},
{title: '操作', width: 120, align: 'center', toolbar: '#barDemo'}
]]
});
// 监听工具条
table.on('tool(demo)', function(obj){
if(obj.event === 'del'){ // 删除操作
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
} else if(obj.event === 'edit'){ // 编辑操作
layer.alert('编辑行:<br>'+ JSON.stringify(obj.data))
}
});
// 新增按钮点击事件
$('#addBtn').click(function() {
var id = data[data.length-1].id + 1;
var name = '新用户';
var age = 0;
var sex = '未知';
data.push({id: id, name: name, age: age, sex: sex});
table.render({
elem: '#demo',
data: data,
cols: [[
{field: 'id', title: 'ID', width: 80, sort: true},
{field: 'name', title: '姓名', width: 120},
{field: 'age', title: '年龄', width: 80, sort: true},
{field: 'sex', title: '性别', width: 80},
{title: '操作', width: 120, align: 'center', toolbar: '#barDemo'}
]]
});
});
});
```
注意,在 HTML 中还需要定义一个用于渲染新增按钮的模板,并绑定到表格的操作列中:
```html
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
</script>
<script type="text/html" id="addDemo">
<button id="addBtn" class="layui-btn layui-btn-sm layui-btn-normal">新增</button>
</script>
```
然后,在 cols 中添加一列,渲染新增按钮:
```js
cols: [[
{field: 'id', title: 'ID', width: 80, sort: true},
{field: 'name', title: '姓名', width: 120},
{field: 'age', title: '年龄', width: 80, sort: true},
{field: 'sex', title: '性别', width: 80},
{title: '操作', width: 120, align: 'center', toolbar: '#barDemo'}
], [
{title: '新增', align: 'center', templet: '#addDemo'}
]]
```
这样就完成了一个含有新增按钮的 layui 表格。希望对你有所帮助!