JSTree: Стандартный список

JSTree — Отличная библиотека для работы со списками ul>li или генерированными с помощью json.  В данном примере рассмотрим академический пример для построения простого дерева из стандартного списка. Как backend использую Django.

Дополнительное чтиво:

Подключается очень просто скачиваем файлы плагина и подключаем в главном .html файле проекта

index/index.html
<head>
<script src="{% static 'index/jquery-3.2.1.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'index/jstree-3.3.5/themes/default/style.min.css' %}" />
</head>
<body>
..
<script src="{% static 'index/jstree-3.3.5/jstree.min.js' %}"></script>
</body>

Генерим список, в моем случае с помощью MPTT

nodes/index.html
<div id="jstree">
	<ul>
	{% recursetree category %}
		<li>
			<!--<a href="/nodes/category/{{ node.id }}">{{ node.name }}</a> -->
			<a href="category/{{ node.id }}" id="{{ node.id }}">{{ node.name }}</a>
			<!-- Дочернии элементы -->
			{% if not node.is_leaf_node %}
				<ul class="submenu">
					{{ children }}
				</ul>
			{% endif %}
		</li>
	{% endrecursetree %}
	</ul>
</div>

Инициализируем плагин

nodes/nodes.js
$('#jstree').jstree({
		"core" : { 
			//Плавная анимация дерева
			animation : 500,
			},
		// Сохраняет состояние дерева	
		"plugins": [ "state"]
		//Возможные плагины: "plugins": [ "state", "html_data", "checkbox", "ui", "crrm"]
	});

 

И по сути все 🙂 Наслаждаемся.

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *