Treetable Plugin v1.2.7

Плагин, основанный на jQuery для отображения дерева в таблице, использует атрибуты data-id и data-pid для расчета структуры. Внешний вид реализован с использованием стилей Bootstrap3. Онлайн демо Строки, имеющие атрибут data-pid='' или data-pid='root', считаются корневыми.

<tr data-id="scml" data-pid=""></tr>
<tr data-id="scml" data-pid="root"></tr>

Скачать

src/bootstrap-treetable.js

Подключить скрипт

<script src="js/bootstrap-treetable.js"></script>

Инициализация

var treetable = $('#treetable').BootstrapTreeTable({
    expandlevel: 1,
    expandAll: false,
    collapseAll: false,
    maxResult: ''
})

Основные опции

• levelSpacing integer 20 уровень отступа в пикселях
• column integer 0 номер колонки для сортировки
• expandlevel integer 0 уровень раскрытия по умолчанию
• expandAll boolean false раскрывать все уровни
• collapseAll boolean false сворачивать все уровни
• expandedIcon 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' класс для совпадающих узлов при поиске
• chosenClass string 'bg-info' класс для выбранного узла### События
• 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```javascript $('#treetable').BootstrapTreeTable().on("show.bs.treetable", function(e, node) { //console.log('show', node); });

### Методы
- searchNodeName поиск узла по имени, возвращает количество найденных узлов string имя узла string
- searchNodeId поиск узла по `data-id` и выделение его string `data-id`
- removeById удаление узла по `data-id` string `data-id`
- removeByNode удаление узла по объекту Object node
- expandLevel раскрытие всех узлов указанного уровня integer уровень
- expandAll раскрытие всех узлов 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('expandLevel', '2'); $('#treetable').BootstrapTreeTable('expandAll'); $('#treetable').BootstrapTreeTable('collapseAll'); $('#treetable').BootstrapTreeTable('destroy'); $('#treetable').BootstrapTreeTable('reset');

### Свойства
- getMaxLevel получение максимального уровня int

$('#treetable').BootstrapTreeTable('getMaxLevel');

![](http://git.oschina.net/uploads/images/2017/0118/151621_d1ae5e05_563221.jpeg "")