layui数据表格获取数据
时间: 2023-08-08 19:08:06 浏览: 403
可以通过以下步骤获取Layui数据表格中的数据:
1. 引入Layui库和jQuery库
```
<!-- 引入 jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 引入 layui -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.min.js"></script>
```
2. 定义数据表格
```
<table id="demo" lay-filter="test"></table>
```
3. 配置数据表格
```
layui.use('table', function(){
var table = layui.table;
//执行渲染
table.render({
elem: '#demo',
url: '/demo/table/user/',
cols: [[
{field:'id', title:'ID', width:80},
{field:'username', title:'用户名', width:120},
{field:'email', title:'邮箱', width:150},
{field:'sex', title:'性别', width:80},
{field:'city', title:'城市', width:100},
{field:'sign', title:'签名', width:160},
{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}
]]
});
});
```
4. 获取数据
```
layui.use('table', function(){
var table = layui.table;
//监听表格复选框选择
table.on('checkbox(test)', function(obj){
console.log(obj)
});
//监听工具条
table.on('tool(test)', function(obj){
var data = obj.data;
//获取数据
console.log(data);
});
});
```
以上是获取Layui数据表格中的数据的基本步骤,具体实现还需要根据实际情况进行调整。
阅读全文