Здравствуйте! Подскажите пожалуйста как правильно реализовать следующую задачу.
Использую приложение
django-mptt и плагин
jsTree для построение деревовидной структуры документов.
jsTree дает возможность перемещать элементы внутри дерева. Чтобы структура дерева не потерялась после обновления страницы, нужно зафиксировать эти изменения в базе данных. Хочу после нажатия кнопки с определенным селектором сохранять новую структуру дерево и обновить блок где находится дерево.
В данный момент я построил следующий порядок действий (поправьте, если рассуждения не верны):
1) При нажатию кнопки нужно будет пройтись по дереву в JS и взять по каждому элементу дерева 5 параметров:
id - id документа;
old_parent и
new_parent - id родительских документов (из какой перемещаем и в какую)
old_position и
new_position - порядковые номера категории в старом и новом месте.
В итоге получить некий массив данных подобного формата:
[
{'id': 35, 'old_parent': 30, 'new_parent': 31, '': 9, "old_position": 2, "new_position": 5},
{...},
{...}
]
2) Затем через
ajax запрос передать во
views данные массива в JSON формате. Используя данные из массива обновить документы во views.
3) По умолчанию приложение
django-mptt в БД для таблицы создает такие поля:
tree_id - как я понял по этому полю происходит сортировка.
parent_id - в этом поле хранятся данные о предке скажем так
level - уровень сложенности
lft и
rght - не понял зачем нужны эти поля. Поэкспериментировал с данными для этих полей и они никак не влияют на отображение дерева.
На основе данных рассуждений начал писать следующий код, но он ничего не происходит при д. В чем ошибка и правильны ли вообще мои рассуждения?
templates:
{% load mptt_tags %}
<ul>
{% recursetree documents %}
<li>
{{ node.title }}
<ul class="children">
{{ children }}
</ul>
</li>
{% endrecursetree %}
</ul>
JS:
$("#document-order-btn").click(function(){
$('#documents').jstree().bind('ready.jstree', function(event, data) {
var listParameters = [];
var parameters = {};
var $tree = $(this);
$($tree.jstree().get_json($tree, {flat: true})).each(function(index, value) {
var node = $("#documents").jstree().get_node(this.id);
parameters = {
"id": node.id,
"old_parent": node.old_parent,
"new_parent": node.parent,
"old_position": node.old_position,
"new_position": node.position
};
listParameters.push(parameters);
});
$.ajax({
url: "documents_order/", // По данному адресу запускается вьюха DocumentOrderView
type: "post",
contentType: 'application/json; charset= utf-8',
dataType: 'json',
data: JSON.stringify(listParameters)
});
});
});
Во первых при нажатии кнопки в JS не могу получить данные. Почему-то данная строка в JS не работает:
$('#documents').jstree().bind('ready.jstree', function(event, data) {
Также я поэкспериментировал и заметил что node.id будет возвращать не id документа, а то задал jsTree при рендовинге. Например: js1_2. В кухню jsTree плагина не заглядывал, поэтому не знаю как поменять данную вещь.
Вторая проблема как правильно отпарсить данные во view? Я думаю должно быть что-то на подобии во вью. Хотя не уверен достаточно ли будет 5 параметров для целостности данных. Как видите вопросов много и не получается все уложить в голове.
views.py:
from braces.views import CsrfExemptMixin, JsonRequestResponseMixin
class DocumentOrderView(CsrfExemptMixin, JsonRequestResponseMixin, View):
def post(self, request, *args, **kwargs):
for id, ???, new_parent in self.request_json.items():
Document.objects.filter(id=id).update(parent_id=new_parent, ???)
return self.render_json_response({'saved': 'OK'})
