bootstrap-table-treegrid冻结某一列代码
时间: 2023-09-10 14:13:50 浏览: 362
要在bootstrap-table-treegrid中冻结某一列,可以通过以下步骤进行操作:
1. 在HTML中创建一个包含bootstrap-table-treegrid的表格结构。例如:
```html
<div class="table-responsive">
<table id="treegrid-table" class="table table-bordered table-striped">
<thead>
<tr>
<th data-field="id" data-treegrid="true">ID</th>
<th data-field="name">Name</th>
<th data-field="age">Age</th>
<th data-field="country">Country</th>
</tr>
</thead>
<tbody>
<!-- 表格数据 -->
</tbody>
</table>
</div>
```
2. 在JavaScript中初始化表格,并设置需要冻结的列。例如:
```javascript
$(function() {
$('#treegrid-table').bootstrapTable({
treeShowField: 'name', // 设置树形结构显示的字段名
columns: [{
field: 'id',
title: 'ID',
width: '100px',
sortable: true,
treegrid: true
}, {
field: 'name',
title: 'Name',
width: '200px',
treegrid: true
}, {
field: 'age',
title: 'Age',
width: '100px',
frozen: true // 设置需要冻结的列
}, {
field: 'country',
title: 'Country',
width: '200px'
}],
treegrid: true, // 开启树形结构
treeGridModel: 'adjacency', // 设置树形结构数据模型
expandColumn: 'name', // 设置展开折叠图标所在列
striped: true,
height: 400
});
});
```
在上述代码中,通过设置`frozen`属性为`true`来冻结某一列,这里的Age列被冻结了,其他列不会被冻结。
这样,就可以在bootstrap-table-treegrid中冻结某一列了。根据实际需求,可以调整表格的其他配置参数。
阅读全文