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

Question

Артур Кох @dudeonthehorse

Email Developer

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

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

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

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

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

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

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

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

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

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

Подписаться 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

Простой
На каком JS фреймворке сделан фронт wildberries.ru?
- 1 подписчик
- час назад
- 52 просмотра
2

ответа
JavaScript

+1 ещё

Простой
Делаю кастомный калькулятор на Tilda, как по клику на картинку выбрать нужную галочку?
- 1 подписчик
- 2 часа назад
- 22 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Как подключить 3D персонажа в three.js?
- 1 подписчик
- 9 часов назад
- 53 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- вчера
- 113 просмотров
1

ответ
JavaScript

+4 ещё

Сложный
Почему в WebSockets History в Burp Suite отображаются кракозябры?
- 1 подписчик
- 21 дек.
- 93 просмотра
2

ответа
JavaScript

Простой
Как выводить JS код?
- 2 подписчика
- 21 дек.
- 1775 просмотров
1

ответ
JavaScript

Простой
Как заставить срабатывать trigger change в Select2?
- 1 подписчик
- 21 дек.
- 59 просмотров
0

ответов
JavaScript

Простой
Почему появляется ошибка Uncaught Reference?
- 1 подписчик
- 20 дек.
- 85 просмотров
2

ответа
JavaScript

Средний
Порождается ли событие в элементе или оно само по себе?
- 1 подписчик
- 20 дек.
- 104 просмотра
1

ответ
JavaScript

+2 ещё

Средний
Как можно изменить настройки модуля навигации карт Google на Яндекс карты?
- 2 подписчика
- 19 дек.
- 214 просмотров
2

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

JavaScript FullStack developer

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

До 220 000 ₽

Создать инструмент для автоматической пересылки сообщений из закрытых

23 дек. 2024, в 20:10

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

Разработка скрипта для мониторинга транзакций на Solana

23 дек. 2024, в 19:45

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

Разработать чат-бота в Телеграм

23 дек. 2024, в 19:16

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?

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

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

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