帮我用layui实现一个有多个关键字的自适应搜索表格
时间: 2023-05-14 07:06:37 浏览: 171
好的,我可以帮你实现一个有多个关键字的自适应搜索表格。你可以使用 layui 的 table 组件和 form 组件来实现。首先,你需要在页面中引入 layui 的相关文件:
```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>
```
然后,你需要在页面中添加一个 table 元素和一个 form 元素:
```html
<table id="table" lay-filter="table"></table>
<form class="layui-form" lay-filter="form">
<div class="layui-form-item">
<div class="layui-input-inline">
<input type="text" name="keyword1" placeholder="关键字1" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-inline">
<input type="text" name="keyword2" placeholder="关键字2" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-inline">
<button class="layui-btn" lay-submit lay-filter="search">搜索</button>
</div>
</div>
</form>
```
接下来,你需要在 JavaScript 中初始化 table 和 form 组件,并实现搜索功能:
```javascript
layui.use(['table', 'form'], function() {
var table = layui.table;
var form = layui.form;
// 初始化 table 组件
table.render({
elem: '#table',
url: '/api/data',
cols: [[
{field: 'id', title: 'ID'},
{field: 'name', title: '名称'},
{field: 'desc', title: '描述'}
]]
});
// 监听 form 表单的提交事件
form.on('submit(search)', function(data) {
// 获取表单数据
var keyword1 = data.field.keyword1;
var keyword2 = data.field.keyword2;
// 重新加载表格数据
table.reload('table', {
where: {
keyword1: keyword1,
keyword2: keyword2
}
});
// 阻止表单的默认提交行为
return false;
});
});
```
在这段代码中,我们使用了 table.reload() 方法来重新加载表格数据,并传递了搜索关键字作为参数。注意,我们需要在 table 元素中添加一个 lay-filter 属性,以便在 reload() 方法中使用。
至此,一个有多个关键字的自适应搜索表格就完成了。你可以根据自己的需求修改表格的样式和数据源。