bootstrap treetable 显示加号
时间: 2023-08-04 17:03:53 浏览: 175
要在 Bootstrap treetable 中显示加号,需要使用一些 CSS 和 JavaScript。以下是一个简单的示例:
HTML:
```html
<table id="tree-table" class="table table-bordered table-hover">
<thead>
<tr>
<th>名称</th>
<th>类型</th>
</tr>
</thead>
<tbody>
<tr data-tt-id="1">
<td>根节点</td>
<td>节点</td>
</tr>
<tr data-tt-id="2" data-tt-parent-id="1">
<td>子节点 1</td>
<td>节点</td>
</tr>
<tr data-tt-id="3" data-tt-parent-id="1">
<td>子节点 2</td>
<td>节点</td>
</tr>
<tr data-tt-id="4" data-tt-parent-id="2">
<td>子节点 1.1</td>
<td>节点</td>
</tr>
<tr data-tt-id="5" data-tt-parent-id="2">
<td>子节点 1.2</td>
<td>节点</td>
</tr>
</tbody>
</table>
```
CSS:
```css
table.tree-table > tbody > tr > td:first-child:before {
content: " ";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 5px;
background: url("path/to/plus.png") no-repeat;
}
table.tree-table > tbody > tr.open > td:first-child:before {
background: url("path/to/minus.png") no-repeat;
}
```
JavaScript:
```javascript
$(function() {
$('#tree-table').treetable({
expandable: true
});
});
```
其中,`path/to/plus.png` 和 `path/to/minus.png` 是加号和减号的图片路径。`expandable: true` 表示表格可以展开和折叠。
注意,这个示例中使用了 jQuery 和 Bootstrap treetable 插件。如果你还没有引入这些文件,需要先引入它们。
阅读全文