bootstrap-table-treegrid固定某一列代码
时间: 2023-09-11 15:02:53 浏览: 315
BootStrap-table 表格固定列,固定左侧列以及右侧列,可以固定特定的列
要实现在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'
}, {
field: 'country',
title: 'Country',
width: '200px'
}],
treegrid: true, // 开启树形结构
treeGridModel: 'adjacency', // 设置树形结构数据模型
expandColumn: 'name', // 设置展开折叠图标所在列
striped: true,
height: 400
});
});
```
在上述代码中,通过设置`width`属性来指定需要固定的列的宽度。在这里,ID列和Name列被固定了,其他列不会被固定。
这样,就可以在bootstrap-table-treegrid中固定某一列了。根据实际需求,可以调整表格的其他配置参数。
阅读全文