基于JQuery的表格树插件,按 data-id和data-pid计算布局,在表格中展现树型结构。
| Name |
Type |
Default |
Description |
| levelSpacing |
integer |
20 |
级次间距 px |
| column |
integer |
0 |
指定排序列号 |
| expandlevel |
integer |
0 |
默认展开级次 |
| expandAll |
boolean |
false |
是否全部展开 |
| collapseAll |
boolean |
false |
是否全部关闭 |
| expendedIcon |
string |
'<span class="glyphicon glyphicon-minus"></span>' |
节点展开图标 |
| collapsedIcon |
string |
'<span class="glyphicon glyphicon-plus"></span>' |
节点关闭图标 |
| leafIcon |
string |
'<span class="glyphicon glyphicon-leaf"></span>' |
节点展开图标 |
| maxResult |
integer |
20 |
搜索最大结果集,超过将停止返回结果 |
| matchClass |
string |
'text-danger' |
查询匹配节点class |
| choseClass |
string |
'bg-info' |
定位匹配节点class |
var treetable = $('#treetable').BootstrapTreeTable({
expandlevel: 1,
expandAll: false,
collapseAll: false,
maxResult: ''
})
| Event Type |
Description |
Return Type |
| show.bs.treetable |
展开节点时触发事件 |
Event e,Object node |
| shown.bs.treetable |
展开节点后触发事件 |
Event e,Object node |
| hide.bs.treetable |
关闭节点时触发事件 |
Event e,Object node |
| hidden.bs.treetable |
关闭节点后触发事件 |
Event e,Object node |
| initialized.bs.treetable |
初始化插件完成后触发事件 |
Event e |
$('#treetable').BootstrapTreeTable().on("show.bs.treetable", function (e, node) {
//console.log('show', node);
})
$('#treetable').BootstrapTreeTable().on("shown.bs.treetable", function (e, node) {
//console.log('shown', node);
})
$('#treetable').BootstrapTreeTable().on("hide.bs.treetable", function (e, node) {
//console.log('hide', node);
})
$('#treetable').BootstrapTreeTable().on("hidden.bs.treetable", function (e, node) {
//console.log('hidden', node);
})
$('#initialized').BootstrapTreeTable().on("hidden.bs.treetable", function (e) {
//console.log('initialized', this);
})
| Name |
Description |
Parameters |
Return Type |
| searchNodeName |
查询节点,返回结果数 |
string查询字符 |
string |
| searchNodeId |
根据节点data-id查询,并高亮显示 |
stringdata-id |
|
| removeById |
根据节点data-id删除节点 |
stringdata-id |
|
| removeByNode |
根据节点Object删除节点 |
Objectnode |
|
| expendLevel |
展开全部指定级次 |
integerlevel |
|
| expendAll |
展开全部节点 |
|
|
| collapseAll |
关闭全部节点 |
|
|
| destroy |
注销插件 |
|
|
| reset |
重置插件 |
|
|
$('#treetable').BootstrapTreeTable('searchNodeName', '计算机');
$('#treetable').BootstrapTreeTable('searchNodeId', '337A2575C9404167AFE020D8C27D1C45');
$('#treetable').BootstrapTreeTable('removeById', '337A2575C9404167AFE020D8C27D1C45');
var node = $(this).parents('tr');
$('#treetable').BootstrapTreeTable('removeByNode', node);
$('#treetable').BootstrapTreeTable('removeById', '337A2575C9404167AFE020D8C27D1C45');
$('#treetable').BootstrapTreeTable('expendLevel','2');
$('#treetable').BootstrapTreeTable('expendAll');
$('#treetable').BootstrapTreeTable('collapseAll');
$('#treetable').BootstrapTreeTable('destroy');
$('#treetable').BootstrapTreeTable('reset');
| Name |
Description |
Return Type |
| getMaxLevel |
获取层级数 |
integer |
$('#treetable').BootstrapTreeTable('getMaxLevel');