基于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');