layui 使用layer.open()展示表格
时间: 2024-09-06 21:03:04 浏览: 45
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
5星 · 资源好评率100%
layui是一个轻量级的前端UI库,它提供了一个方便的方法`layer.open()`用于异步显示各种类型的弹窗,包括表格。要通过`layer.open()`展示表格,首先你需要准备一个HTML表格结构,并可以结合后台数据动态生成。下面是一个简单的步骤说明:
1. 引入layui和jQuery库:在HTML页面头部添加layui和jQuery的链接引用。
```html
<link rel="stylesheet" href="https://www.layui.com/static/css/layui.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/layui@2.7.8/dist/layui.js"></script>
```
2. 当需要展示表格时,你可以编写JavaScript代码如下:
```javascript
// 假设你有一个获取表格数据的函数getData()
function getData() {
// 调用后台接口获取数据
$.ajax({
url: 'your-api-url', // 替换为实际的API地址
success: function(data) {
// 将数据解析并设置为表格内容
var tableData = '<table id="myTable">';
for (var i = 0; i < data.length; i++) {
tableData += '<tr><td>' + data[i].column1 + '</td><td>' + data[i].column2 + '</td></tr>';
}
tableData += '</table>';
// 使用layer.open()展示表格
layer.open({
type: 2, // 2代表iframe层
title: '我的表格',
shadeClose: true, // 点击遮罩关闭窗口
content: tableData,
area: ['auto', 'auto'], // 自适应大小
btn: [] // 取消按钮
});
},
error: function() {
alert('获取数据失败');
}
});
}
```
在这个例子中,当用户触发某个事件(比如点击按钮)时,会调用`getData()`函数,从服务器获取表格数据并在一个新的弹出窗口中展示。
阅读全文