layui表格怎么使用
时间: 2023-09-05 12:09:10 浏览: 68
layui表格动态添加|layui表格可编辑
5星 · 资源好评率100%
要使用layui表格,首先需要引入layui库和layui表格模块的js和css文件。具体的引入方式可以参考layui官网的文档。
在HTML页面中,可以通过下面的代码创建一个简单的表格:
```
<table id="demo" lay-filter="test"></table>
```
然后,在JavaScript中,可以使用下面的代码初始化和渲染表格:
```
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
url: '/demo/table/user/', //数据接口
page: true, //开启分页
cols: [[ //表头
{field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'},
{field: 'username', title: '用户名', width: 120},
{field: 'sex', title: '性别', width: 80, sort: true},
{field: 'city', title: '城市'},
{field: 'sign', title: '签名'},
{field: 'experience', title: '积分', width: 80, sort: true},
{field: 'score', title: '评分', width: 80, sort: true},
{field: 'classify', title: '职业', width: 80},
{field: 'wealth', title: '财富', width: 135, sort: true},
{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
});
});
```
在上面的代码中,我们通过调用`layui.use('table', function(){})`来引入并初始化表格模块。然后,我们使用`table.render()`方法来渲染表格,其中`elem`属性用于指定表格的ID,`url`属性用于指定数据接口的URL,`cols`属性用于指定表头和每一列的属性。
通过以上的步骤,就可以实现一个简单的layui表格。当然,如果需要更加复杂的功能,还需要进一步学习和使用layui表格模块的其他功能。
阅读全文