Как получить выделенные узлы из дерева JsTree?

Question

Артур Кох @dudeonthehorse

Email Developer

Как получить выделенные узлы из дерева JsTree?

Гугл выдает множество вариантов, но некоторые вовсе не решают проблему, другие частично. Родная функция для получения списка выделенных узлов не подходит, т.к. отдает одноуровневый массив айдишников.

Мне же необходимо соблюсти вложенность. Моя реализация выглядит так — jsfiddle.net/DrqRu/

Функцию вызываю по событию .on. На статичном дереве все хорошо. А вот в проекте дерево динамичное. Новые узлы подгружаются аяксом при открытии узла.

И вот тут картина следующая:

1. Корневой узел свернут. Открываю всех его детей. Они подгрузились аяксом. Выделяю чекбоксом корневой, выделяются все дети. Отправляю дерево на экспорт. Мой массив выглядит так как мне нужно.

2. Корневой узел свернут. Выделяю его чекбоксом. Запускается функция $(tree).jstree("open_all",'отмеченный узел');<br>, которая раскрывает всех детей(подгружает аяксом). Затем все открытые дети выделяются автоматически(так как был выделен их предок). Жму на экспорт. Подгруженные(и в то же время выделенные) дети не пошли в массив.

Что я делаю не так?

Вопрос задан более трёх лет назад
5402 просмотра

Комментировать

Подписаться 2 Оценить Комментировать

Пригласить эксперта

Ответы на вопрос 2

11 комментариев

Артур Кох @dudeonthehorse Автор вопроса

Если на основе чекбоксов, то примерно по моей же схеме. Если бы дерево было изначально прогруженно на все уровни, то легко.

Написано более трёх лет назад
kuzemchik @kuzemchik
Основная идея была сделать

var selected = filtersTree.get_selected();

А потом подняться до родителя и установить path от корня.
Написано более трёх лет назад
kuzemchik @kuzemchik
Поддерево выбранного доставалось с помощью

var selectedJson = filtersTree.get_json(selected[i])[0];
Написано более трёх лет назад
kuzemchik @kuzemchik

Дерево грузилось динамически через плагин json с урлом.

Написано более трёх лет назад
Артур Кох @dudeonthehorse Автор вопроса

Да, вношу поправочку. На экспорт я посылаю не только айдишники. Туда идут так же другие данные, которые я цепляю из DOM. Следовательно get_checked не панацея.

Написано более трёх лет назад
kuzemchik @kuzemchik

я работал с json, так что, наверное, помочь не смогу. Чекбоксов кстати нет, через selected модуля ui работает. Но принцип тот же самый думаю.
А что именно вы храните в DOM?

Написано более трёх лет назад
Артур Кох @dudeonthehorse Автор вопроса

У нас похоже недопонимание. Изначально строю дерево на основе json. Использую плагин чекбоксов. После построения дерева пользователь может нащелкать необходимые ему узлы для экспорта данных. Данные уходят php скрипту в формате json(в том же виде, в каком они были, когда мы строили дерево). Т.е. при нажатии на кнопку «экспорт», я пробегаю по DOM структуре дерева, чтобы построить json и передать его на обработку. Храню там несколько пользовательских атрибутов типа data-attr=«value». Получаю их в DOM так же из начального json.

Написано более трёх лет назад

kuzemchik @kuzemchik

Что-то jsFiddle не хочет работать.
Вставлю сюда.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Sample Title</title>
	<script src="jquery-1.6.min.js"></script>
	<script src="jquery.jstree.js"></script>
	<script>
	$(document).ready(function(){
		$('#tree').jstree({ 
		"themes" : {
		    "theme" : "apple",
		    "dots" : true,
		    "icons" : false
		},
		"json_data" : {
			"data" : [
				{ 
					"data" : "Networks", 
					"metadata" : { id : "network" },
					"children" : [ 
					{
						"data":"Publishers",
						"metadata":{ id : "publisher" },
						"children" : [ 

						]
					},
					{
						"data":"Advertisers",
						"metadata" : { id : "advertiser" },
						"children":[
						]
					}]
				}
			]
		},
		"plugins" : [ "themes", "json_data", "ui"]
	});
	$('#click_button').click(function(){
		var tree=$.jstree._reference('#tree');
		var selected = tree.get_selected();
		var result = [];
		for(var i=0, selectedLength = selected.length; i<selectedLength;i++)
		{
			var selectedJson = tree.get_json(selected[i])[0];
			result.push(selectedJson);
		}
		document.write(JSON.stringify(result))
	});
	});

	
	</script>
</head>
<body>
<div id="tree"></div>
<button id="click_button">Export</button>

</body>
</html>

При динамической подгрузке работает (в json_data есть ajax).

Написано более трёх лет назад

Артур Кох @dudeonthehorse Автор вопроса

Да, так работает. Рискну предположить, что мы работаем с разными версиями плагина. И вот почему. Дерево по вашему шаблону json строится. По моему шаблону тоже.
Ваш скрипт экспорта работает с обоими шаблонами, но на выводе дает ваш шаблон. Мне же нужен мой. Поможете?

Написано более трёх лет назад
Артур Кох @dudeonthehorse Автор вопроса

Не совсем так выразился. Ваш скрипт пробежавшись по дереву стоит json, который вы привели в начале. Мне же нужен в виде, представленном по моей ссылке.

Написано более трёх лет назад
kuzemchik @kuzemchik

Я правильно понимаю что вы хотите избавиться от лишних данных в json? Если да, то я предложил бы пройтись по полученному json и построить по нему то, что вам надо для отправки на сервер.

Написано более трёх лет назад

6 комментариев

kuzemchik @kuzemchik

ох, не туда

Написано более трёх лет назад
Артур Кох @dudeonthehorse Автор вопроса

И да и нет. Формат немного иной.
Все атрибуты узла должны быть в элементе attr. В вашем же случае, они разбиты на attr и metadata. stateи class не нужны, но в тоже время и не мешают.
Пример того, что нужно я уже приводил — pastebin.com/eNPrgjKn

Написано более трёх лет назад

kuzemchik @kuzemchik

в get_json передаете список аттрибутов которые надо достать у элемента li. data-* jstree всегда кладет в metadata, поэтому его придется удалить руками. Есть side effect что классы расставляются странно, в том смысле что где-то аттрибут class есть, а где-то нет. Cкорее всего это баг jsTree. Проще всего будет пройти и удалить пустые аттрибуты класса.

  function recursive_simplify(node){
    if(node.children){
      for(var i =0;i<node.children.length;i++){
        node.children[i] = recursive_simplify(node.children[i])
      }
    }
    delete node['metadata'];
    return node
  }
  $('#click_button').click(function(){
    var tree=$.jstree._reference('#tree');
    var selected = tree.get_selected();
    var result = [];
    for(var i=0, selectedLength = selected.length; i<selectedLength;i++)
    {
      var selectedJson = tree.get_json(selected[i],['id','rel','data-bin','data-pos','class'])[0];
      selectedJson = recursive_simplify(selectedJson);
      result.push(selectedJson);
    }
    document.write(JSON.stringify(result))
  });

Написано более трёх лет назад

Артур Кох @dudeonthehorse Автор вопроса

Большое спасибо.

Написано более трёх лет назад
Артур Кох @dudeonthehorse Автор вопроса

В продолжение темы есть вопрос. На примере мы работали с get_selected. Меня же интересует get_checked(выбранные чекбоксами узлы), НО эта функция возвращает набор checked узлов. Мне же нужно и ckecked и undetermined узлы. Выделенные чекбоксами узлы имеют именно эти состояния, либо unckecked.

Написано более трёх лет назад
Артур Кох @dudeonthehorse Автор вопроса

Собственно нужны все кроме unckecked

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+1 ещё

Средний
Как подключить поисковую систему в js?
- 1 подписчик
- 31 минуту назад
- 19 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- 4 часа назад
- 44 просмотра
1

ответ
JavaScript

Средний
Почему не срабатывает горячая клавиша в расширение?
- 1 подписчик
- 5 часов назад
- 22 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- 6 часов назад
- 24 просмотра
0

ответов
JavaScript

Простой
Почему перестало работать меню?
- 1 подписчик
- вчера
- 140 просмотров
1

ответ
JavaScript

Простой
Какая логика у перебора массива таким способом?
- 1 подписчик
- вчера
- 163 просмотра
5

ответов
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- 20 нояб.
- 85 просмотров
1

ответ
JavaScript

Простой
E.target видит лишь малую область блока?
- 1 подписчик
- 20 нояб.
- 51 просмотр
0

ответов
JavaScript

Простой
Как при открытии блока закрыть предыдущий блок?
- 1 подписчик
- 20 нояб.
- 105 просмотров
0

ответов
JavaScript

Простой
Можно ли использовать Intersection Observer API для не дочерних элементов?
- 1 подписчик
- 20 нояб.
- 48 просмотров
0

ответов
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Провести подготовку и перенос данных из 1С УТ в 1С управление нашей фи

22 нояб. 2024, в 17:46

20000 руб./за проект

Доработать функционал загрузки прайсов в БД

22 нояб. 2024, в 17:43

5000 руб./за проект

Нужен верстальщик. Переверстать, доверстать, доработать интерфейс

22 нояб. 2024, в 16:13

7000 руб./за проект

Answer 1 · 2012-06-05 19:55:40

kuzemchik @kuzemchik

Была задачка копирования куска дерева из одного дерева в другое. Не уверен как выдрать =/

Ответ написан более трёх лет назад

11 комментариев

Answer 2 · 2012-06-05 21:44:55

что-то вроде

	function recursive_simplify(node){
		if(node.children){
			for(var i =0;i<node.children.length;i++){
				node.children[i] = recursive_simplify(node.children[i])
			}
		}
		return {id:node.attr.id,children:node.children}
	}

Как получить выделенные узлы из дерева JsTree?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт