В этой статье блога мы рассмотрим различные методы выбора только видимых узлов в библиотеке jstree. jstree — популярный плагин JavaScript, используемый для создания интерактивных древовидных представлений. Сосредоточив внимание на выборе видимых узлов, мы можем улучшить взаимодействие с пользователем и оптимизировать функциональность нашей реализации jstree. Мы обсудим несколько подходов, каждый из которых будет сопровождаться примерами кода, иллюстрирующими их реализацию. Давайте погрузимся!

Метод 1: использование функции is_visible
Библиотека jstree предоставляет функцию is_visible, которая позволяет нам проверять видимость определенного узла. Мы можем перебирать все узлы и выбирать только видимые. Вот пример:

var allNodes = $('#tree').jstree(true).get_json('#', { flat: true });
var visibleNodes = [];
allNodes.forEach(function (node) {
  if ($('#tree').jstree(true).is_visible(node)) {
    visibleNodes.push(node);
  }
});
console.log(visibleNodes);

Метод 2: использование функции get_node
Другой подход — использовать функцию get_node, предоставляемую jstree. Мы можем получить все узлы и отфильтровать видимые на основе их состояния. Вот как это можно сделать:

var allNodes = $('#tree').jstree(true).get_node('#', true).children_d;
var visibleNodes = [];
allNodes.forEach(function (nodeId) {
  var node = $('#tree').jstree(true).get_node(nodeId);
  if (node.state.hidden === false) {
    visibleNodes.push(node);
  }
});
console.log(visibleNodes);

Метод 3: Метод селектора CSS
Мы можем использовать селекторы CSS для прямого выбора видимых узлов. Используя селектор :visible, мы можем добиться этого в сжатой форме. Вот пример:

var visibleNodes = $('#tree').find('.jstree-node:visible');
console.log(visibleNodes);

В этой статье мы рассмотрели три различных метода выбора только видимых узлов в jstree. Первые два метода используют встроенные функции библиотеки jstree, is_visibleи get_node, а третий метод использует преимущества селекторов CSS. В зависимости от ваших конкретных требований и сложности реализации jstree вы можете выбрать наиболее подходящий метод. Улучшение выбора видимости узлов в jstree будет способствовать улучшению взаимодействия с пользователем и улучшению функциональности.