Layui表格冻结窗口怎么写?
时间: 2024-09-12 11:16:02 浏览: 75
layui数据表格跨行自动合并的例子
5星 · 资源好评率100%
LayUI表格的冻结列功能通过`layui.table`的`toolbar`选项中的`freeze`配置实现。首先,你需要在初始化表格时设置`toolbar`区域,并启用`freeze`属性来指定冻结的列数。这是一个基本的例子:
```javascript
layui.use('table', function () {
var table = layui.table;
// 初始化表格,假设我们有5列,其中第一列和第二列需要冻结
table.render({
elem: '#demoTable', // 表格元素ID
url: '你的数据源URL', // 数据获取地址
cols: [
{ field: 'title', title: '标题', width: 150, frozen: true },
{ field: 'subtitle', title: '副标题', frozen: true },
{ field: 'data1', title: '数据1' },
{ field: 'data2', title: '数据2' },
{ field: 'data3', title: '数据3' }
],
toolbar: {
items: ['refresh'] // 只显示刷新按钮
}
});
});
```
在这个例子中,`frozen: true`用于标记哪些列为冻结列。用户滚动表格时,冻结列会始终保持可见。
阅读全文