layui 数据表格 表头添加查询工具条
时间: 2023-08-08 20:14:04 浏览: 58
在 layui 数据表格中,可以通过 `toolbar` 参数来添加工具条,而通过 `cols` 参数来定义数据表格的表头。因此,我们可以将查询工具条放在表头中。
具体实现步骤如下:
1. 在 `cols` 参数中定义表头,同时添加一个名为 `toolbar` 的属性,用于指定工具条的 HTML 元素 ID。
```javascript
var tableCols = [[
{type: 'checkbox'},
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄'},
// 定义查询工具条
{toolbar: '#queryToolbar', title: '查询'}
]];
```
2. 在表格 HTML 代码中添加一个 `div` 元素,用于放置查询工具条,同时为该元素设置一个 ID。
```html
<div id="queryToolbar" class="layui-btn-container">
<button class="layui-btn layui-btn-sm">查询</button>
<button class="layui-btn layui-btn-sm">重置</button>
</div>
```
3. 在 JavaScript 中使用 `render` 方法渲染数据表格,并指定 `toolbar` 参数为工具条元素的 ID。
```javascript
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#dataTable',
url: '/api/data',
cols: tableCols,
toolbar: '#queryToolbar',
page: true
});
});
```
这样,就可以在表头中添加查询工具条了。