layui table demo
时间: 2023-09-01 18:10:40 浏览: 55
以下是一个基本的 layui table 示例:
HTML 代码:
```html
<table class="layui-table" lay-data="{url:'data.json'}" lay-filter="demo">
<thead>
<tr>
<th lay-data="{field:'id', width:80}">ID</th>
<th lay-data="{field:'username', width:120}">用户名</th>
<th lay-data="{field:'email', width:200}">邮箱</th>
<th lay-data="{field:'sex', width:80, templet: '#sexTpl'}">性别</th>
<th lay-data="{field:'city', width:100}">城市</th>
<th lay-data="{field:'sign', width:200}">签名</th>
<th lay-data="{field:'experience', width:100}">积分</th>
<th lay-data="{field:'ip', width:120}">IP</th>
<th lay-data="{field:'logins', width:100}">登入次数</th>
<th lay-data="{field:'joinTime', width:160}">加入时间</th>
</tr>
</thead>
</table>
<script type="text/html" id="sexTpl">
{{# if(d.sex === 1){ }}
男
{{# } else { }}
女
{{# } }}
</script>
```
JavaScript 代码:
```javascript
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#demo',
height: 315,
url: '/demo/table/user/', //数据接口
page: true, //开启分页
cols: [[ //表头
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'},
{field: 'username', title: '用户名', width:120},
{field: 'email', title: '邮箱', width:200},
{field: 'sex', title: '性别', width:80, templet: '#sexTpl'},
{field: 'city', title: '城市', width:100},
{field: 'sign', title: '签名', width:200},
{field: 'experience', title: '积分', width:100, sort: true},
{field: 'ip', title: 'IP', width:120},
{field: 'logins', title: '登入次数', width:100, sort: true},
{field: 'joinTime', title: '加入时间', width:160, sort: true}
]]
});
});
```
其中,我们使用了 `lay-data` 属性定义了表格的数据来源和表头的属性,使用了 `templet` 定义了一个模板,用于在表格中展示性别。在 JavaScript 中,我们使用 `table.render` 方法来渲染表格,并定义了表格的一些属性,如高度、数据接口、是否开启分页等等。