怎么使用上面的代码呢?
时间: 2023-12-08 08:07:01 浏览: 33
首先,需要在页面中引入 layui 的相关组件。可以在 `head` 标签中引入 layui 的 CSS 和 JavaScript 文件,如下所示:
```html
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
```
然后,在页面中添加一个表格和一个搜索框,示例如下:
```html
<div class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">关键字</label>
<div class="layui-input-inline">
<input type="text" name="keyword" placeholder="请输入关键字" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<button class="layui-btn" lay-submit lay-filter="demo-table-search">搜索</button>
</div>
</div>
</div>
<table id="demo" lay-filter="test"></table>
```
其中,`lay-filter="demo-table-search"` 表示该表单的过滤器,用于监听表单提交事件。
接下来,在 JavaScript 文件中编写表格的渲染和搜索功能的代码,示例如下:
```javascript
layui.use(['table', 'form'], function() {
var table = layui.table;
var form = layui.form;
// 渲染表格
table.render({
elem: '#demo',
url: '/api/getData',
cols: [[
{ field: 'id', title: 'ID', sort: true },
{ field: 'name', title: '姓名' },
{ field: 'age', title: '年龄', sort: true },
{ field: 'sex', title: '性别' },
{ field: 'score', title: '分数', sort: true }
]],
page: true
});
// 监听搜索表单的提交事件
form.on('submit(demo-table-search)', function(data) {
var keyword = data.field.keyword;
// 重新加载表格,并传入一个配置对象
table.reload('demo', {
page: {
curr: 1 // 重新从第 1 页开始
},
where: {
keyword: keyword // 搜索的关键字
}
});
return false; // 阻止表单默认提交
});
});
```
其中,`table.render()` 方法用于渲染表格,`form.on()` 方法用于监听表单提交事件。在监听函数中,通过 `table.reload()` 方法重新加载表格,并传入一个配置对象,其中的 `where` 属性用于传递搜索的关键字。
最后,在后端编写一个接口,用于返回表格数据。可以使用 Flask、Express、Django 等框架实现。接口返回的数据格式应该符合 layui 的规范。