layui数据表格获取数据
时间: 2023-06-29 07:11:17 浏览: 58
在 layui 中,可以使用 table 模块来创建数据表格,同时也提供了获取表格数据的方法。下面是一个简单的示例:
HTML 代码:
```html
<table id="demo" lay-filter="test"></table>
```
JavaScript 代码:
```javascript
layui.use('table', function(){
var table = layui.table;
// 渲染表格
table.render({
elem: '#demo',
url: '/api/tableData', // 数据接口
cols: [[
{field: 'id', title: 'ID', width: 80},
{field: 'username', title: '用户名', width: 120},
{field: 'email', title: '邮箱', minWidth: 150},
{field: 'sex', title: '性别', width: 80},
{field: 'city', title: '城市', width: 100},
{field: 'sign', title: '签名', minWidth: 200},
{field: 'experience', title: '积分', width: 80},
{field: 'score', title: '评分', width: 80},
{field: 'classify', title: '职业', width: 100},
{field: 'wealth', title: '财富', width: 135},
{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))
}
});
// 获取表格数据
var data = table.cache.demo;
});
```
在上面的示例中,通过 `table.render()` 方法渲染了一个数据表格,并设置了数据接口和表格列信息。同时,通过监听 `table.on('tool', ...)` 方法来实现对表格的操作,如查看、删除和编辑等。最后使用 `table.cache.demo` 来获取表格数据。其中 `demo` 是表格的 id,可以根据实际情况进行修改。