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

Question

Артур Кох @dudeonthehorse

Email Developer

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

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

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

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

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

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

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

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

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

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

Подписаться 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 подписчик
- 8 часов назад
- 66 просмотров
2

ответа
JavaScript

+2 ещё

Средний
Как изменить содержание блока програмно со свойством contentEditable?
- 1 подписчик
- 9 часов назад
- 40 просмотров
0

ответов
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- 9 часов назад
- 22 просмотра
0

ответов
JavaScript

Простой
Как после сабмита очистить поле type="tel" и показать очищенную маску?
- 1 подписчик
- 14 часов назад
- 53 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Почему при добавление переменно в style, она перестаёт обновляться?
- 1 подписчик
- вчера
- 66 просмотров
1

ответ
JavaScript

Простой
Как получить результат отправки на сервер, если fetch-запрос был в одной функции, а результат нужен в другой?
- 1 подписчик
- вчера
- 76 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Существуют ли браузерные реализации WebView для AJAX и Fetch?
- 1 подписчик
- вчера
- 86 просмотров
1

ответ
JavaScript

Простой
Как обрабатывать пользовательский запрос больше не показывать конкретный попап?
- 1 подписчик
- 22 апр.
- 69 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать появление баннера от определенной высоты?
- 3 подписчика
- 22 апр.
- 589 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Запуск установки приложения PWA при загрузке страницы?
- 2 подписчика
- 21 апр.
- 216 просмотров
0

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

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

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

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

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Модель управления электродвигателем в Matlab, Simulink

24 апр. 2024, в 06:52

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

Анимация логотипа

24 апр. 2024, в 00:08

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

Разработка дизайна раздела «Статьи» на сайте «Мир отходов»

23 апр. 2024, в 23:01

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

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?

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

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

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