Как реализовать expandNode в onNodeSelected из дерева загрузки Bootstrap?

Question

Узлы из дерева Bootstrap можно свернуть / развернуть только с префиксами + & -. Я понимаю, что событие click сохранено для менее простых вещей. Мы используем событие click, чтобы отправить информацию о листьях в другую часть страницы.

Но мой клиент хочет именно этого: свернуть и развернуть, нажав на элемент li. Который, на самом деле, гораздо более удобный и интуитивно понятный.

Я нашел методы "expandNode" и "collapseNode" на GitHub.

$('#tree').treeview('expandNode', [nodeId, {
  levels: 2,
  silent: true
}]);
$('#tree').treeview('collapseNode', [nodeId, {
  silent: true,
  ignoreChildren: false
}]);

Теперь я хочу вызвать их непосредственно из события onNodeSelected следующим образом:

$('#treeview').treeview({
  data: data,
  multiSelect: true,
  highlightSelected: false,
  onNodeSelected: function(event, node) {
    if (node.nodes == undefined) {
      // sends node info to another element
    } else if (node.state.expanded) {
      // TODO collapse children 
      collapseNode(node.nodeId);
    } else {
      // TODO expand children 
      expandNode(node.nodeId);
    }
  }
});

function collapseNode(nodeId) {
  $('#tree').treeview('collapseNode', [nodeId]);
  alert("collapse " + nodeId);
}

function expandNode(nodeId) {
  $('#tree').treeview('expandNode', [nodeId]);
  alert("expand " + nodeId);
}

Оповещения сработали и показывают правильный идентификатор узла. Но узел не расширен (или свернут). Что мне не хватает?

Answer 1

Вы выбираете неправильный вид дерева в функциях. Попробуйте обновить их до следующего:

function collapseNode(nodeId) {
  $('#treeview').treeview('collapseNode', [nodeId]);
  alert("collapse " + nodeId);
}

function expandNode(nodeId) {
  $('#treeview').treeview('expandNode', [nodeId]);
  alert("expand " + nodeId);
}