jstree - остановить разворачивание одного расширенного узла - PullRequest
Новая
       13

jstree - остановить разворачивание одного расширенного узла

0 голосов
/ 12 ноября 2018

Используя jstree возможно ли заблокировать развал одного конкретного узла?

У меня есть древовидная структура, которую можно развернуть / свернуть по желанию ... но у меня есть определенные узлы, которые всегда должны быть открыты и не позволять пользователю свернуть их.

Есть ли способ заблокировать коллапс (возможно, через атрибут data-jstree в <li>) ... и, если возможно, способ также удалить треугольник с элемента?

Я пытался подключиться к событию close_node.jstree, но ни использование return false, ни e.preventDefault() не останавливает его.

В следующем примере я хочу, чтобы «Элемент 2 - должен оставаться открытым» ВСЕГДА был открыт и не позволял пользователю скрывать элемент «Всегда видимый» ... 

$(function() {
  $("#treeRoot").jstree({
    core: {
      themes: {
        variant: "small"
      }
    }
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="treeRoot">
  <ul>
    <li data-jstree='{"opened":true}'>Root
      <ul>
        <li>Item 1</li>
        <li data-jstree='{"opened":true}'>Item 2 - Must keep open
          <ul>
            <li>Always Visible</li>
          </ul>
        </li>
        <li>Item 3</li>
      </ul>
    </li>
  </ul>
</div>

1 Ответ

0 голосов
/ 12 ноября 2018

Я не смог найти никакой опции для предотвращения закрытия узла, кроме опции переопределения функции close_node кода jstree.

Вот пример: 

$(function() {

  $.jstree.core.prototype.old_close_node = $.jstree.core.prototype.close_node;
  $.jstree.core.prototype.close_node = function(obj, animation) {
    node_obj = this.get_node(obj);
    // in case the flag exists - don't continue to with the original function.
    if (node_obj.state.prevent_close) {
      return;
    }
    this.old_close_node(obj, animation);
  }
  
  $("#treeRoot").on('loaded.jstree', function() {
    $('#treeRoot li').each((index, el) => {
      if ($(el).data('jstree') && $(el).data('jstree').prevent_close) {
        $(el).addClass('prevent-close');
      }
    })
  }).jstree({
    core: {
      themes: {
        variant: "small"
      }
    }
  })
});
.jstree-default-small .jstree-open.prevent-close>.jstree-ocl {
  background-position: -71px -7px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="treeRoot">
  <ul>
    <li data-jstree='{"opened":true}'>Root
      <ul>
        <li>Item 1</li>
        <!--                             v-- this is the flag to prevent the close -->
        <li data-jstree='{"opened":true, "prevent_close": true}'>Item 2 - Must keep open
          <ul>
            <li>Always Visible</li>
          </ul>
        </li>
        <li>Item 3</li>
      </ul>
    </li>
  </ul>
</div>

У меня не было времени разобраться с треугольником, дайте мне знать, если у вас есть проблемы, я постараюсь найтирешение для этого тоже.

...