Как открывать ajax запросом ветки дерева?

Question

[nurzhannogerbek]

Здравствуйте! Помогите пожалуйста разобраться.

В базе данных хранятся документы в древовидной структуре. Отображаю данное дерево в шаблоне следующим образом. Для этого использую библиотеку: Nestable

documents.html:

<ol class="dd-list">
	{% for node in documents %}
		{% include "documents/tree_view_template.html" %}
	{% endfor %}
</ol>

tree_view_template.html:

<li class="dd-item" data-id="{{node.id}}">
	<div class="dd-content">
		<span>{{ node.title|truncatechars:200 }}</span>
	</div>
	{% if node.get_children %}
	<ol class="dd-list">
		{% for ch in node.get_children %}
			{% with node=ch template_name="documents/tree_view_template.html" %}
				{% include template_name %}
			{% endwith %}
		{% endfor %}
	</ol>
	{% endif %}
</li>

Все ветки дерева изначально закрыты. Работает это следующим образом. Во view формирую список документов верхнего уровня. То есть беру все документы у которых parent_id пуст или равен нулю. Отправляю в шаблон данные документы. Затем через метод get_children проверяю каждый документ на наличие потомков.

Проблема в том, что данных много и нет смысла все это отображать сразу. К тому же на проверку потомков каждого документа уходит много времени из-за чего подает производительность. Хочу реализовать так чтобы при открытии документа через ajax запрос подгружались потомки данного документа.

Как в данном случаи следует лучше всего переделать шаблон?

Comments

[sim3x]

данных много

сколько?

[nurzhannogerbek]

sim3x, Здравствуйте! :) Есть страницы, которые рендорятся по 4~5 cекунд, если выводить все сразу на страницу. Я реализовал бесконечный скроллинг, это немного улучшило производительность. Посмотрев в терминале sql запросы к базе данных заметил, что происходит очень много микро запросов (0.002 мс), при проверке всех потомков каждого документа. Поэтому думаю лучше будет подгружать потомков с помощью ajax при попытки открыть ветку в дереве. Как вы считаете?

В основной таблице 10534 записей (документов). Не знаю можно ли это считать много. Все ведь постигается в сравнении.

Вот кстати пример узла который рендорит библиотека Nestable.

<li class="dd-item infinite-item dd-collapsed" data-id="12005">

	<!--Кнопки открытия/закрытия ветки-->
	<i class="fa fa-minus-square" data-action="collapse" style="display: none;"></i>
	<i class="fa fa-plus-square" data-action="expand" style=""></i>

	<!--Область для перетаскивания-->
	<div class="dd-handle"></div>

	<div class="dd-content">
		<span>
			Название документа
		</span>
	</div>
	
	<!--Эту область хочу подгружать по необходимости-->
	<ol class="dd-list infinite-container" style="display: none;">
		<!--Дальше рекурсия-->
	</ol>
</li>

Библиотека Nestable сразу добавляет кнопки открытия/закрытия веток, если в li элементе есть ol элемент. Поэтому приходится применять такую вот конструкцию:
{% if node.get_children %}.

Я начал составлять ajax запрос следующим образом, но возникли вопросы.
1) Как запустить ajax запрос лишь один раз. Я имею введу после того как ветка откроется, то в следующих открытиях этой же ветки уже не нужно выполнять ajax запросы.
2) Как получить значения data-id по клику на кнопку. Этот id нужен мне чтобы во view я мог сформировать queryset. Попросту говоря получить потомков данного документа:

Document.objects.filter(id=data-id).get_descendants()

3) Как потом подгружать их в шаблоне?

$("i[data-action='expand']").click(function(){
	$.ajax({
		url: "",
		type: "post",
		contentType: 'application/json; charset= utf-8',
		dataType: 'json',
		data: $(this).closest("dd-item").attr("data-id"),  // Возвращает undefined
	});
});

[nurzhannogerbek]

С data-id pазобрался. Получаю id документа так: $(this).parent().data("id")

[sim3x]

NogerbekNurzhan, На беке - мптт?

[nurzhannogerbek]

sim3x, Здравствуйте! :) Нет, не django-mptt. Использую приложение django-closuretree. Приложение очень удобное и простое. Данное приложение создает две таблице по логике Closure Table. Основная таблица (назовем ее Document), где хранится общая информация о документе и вторая таблица (назовем ее DocumentClosure), где хранится информация о связи документов между друг другом. Единственное что не предусмотрено в этом приложении так это рендоринг дерево. В django-mptt потомки кэшируются вроде из-за чего не происходит такой проблемы в производительностью при чтении. Могу ошибаться, так как не до конца понял механику django-mptt хоть и заглядывал под капот проекта. Было бы неплохо так же кэшировать потомков или подгружать их ajax-ом.