layui表格,点击按钮跳出弹出层
时间: 2023-11-14 19:07:59 浏览: 124
好的,针对您的问题,需要使用Layui的弹出层组件,在表格中添加一个按钮,并且绑定点击事件,在点击事件中创建弹出层并且显示。以下是示例代码:
HTML代码:
```html
<table id="table" lay-filter="table">
<!-- 表格内容 -->
<td><button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button></td>
<!-- 按钮 -->
</table>
```
JavaScript代码:
```javascript
layui.use(['table', 'layer'], function() {
var table = layui.table;
var layer = layui.layer;
// 监听表格中按钮的点击事件
table.on('tool(table)', function(obj) {
if (obj.event === 'edit') {
// 弹出层内容
var html = '<form class="layui-form">';
html += '<div class="layui-form-item">';
html += '<label class="layui-form-label">姓名</label>';
html += '<div class="layui-input-block">';
html += '<input type="text" name="name" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">';
html += '</div>';
html += '</div>';
html += '<div class="layui-form-item">';
html += '<label class="layui-form-label">年龄</label>';
html += '<div class="layui-input-block">';
html += '<input type="text" name="age" lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="layui-input">';
html += '</div>';
html += '</div>';
html += '<div class="layui-form-item">';
html += '<div class="layui-input-block">';
html += '<button class="layui-btn" lay-filter="submit" lay-submit>提交</button>';
html += '</div>';
html += '</div>';
html += '</form>';
// 弹出层
layer.open({
title: '编辑信息',
area: ['500px', '300px'],
content: html
});
// 监听提交事件
form.on('submit(submit)', function(data) {
// 模拟Ajax提交表单
layer.msg(JSON.stringify(data.field));
return false;
});
}
});
});
```
您可以根据具体需求修改弹出层的内容以及样式。另外,也可以在弹出层中使用模板引擎来生成内容。
阅读全文