- PVSM.RU - https://www.pvsm.ru -
Привет!
О плагине JsTree [1] на хабре упоминалось [2] лишь в далеком 2009 году. С тех времен все довольно сильно поменялось. Плагин активно развивается. Страница проекта на гитхабе [3].
Учитывая специфику проекта, над которым сейчас работаю(справочная система), этот плагин оказался просто незаменимым, и я использую 90% его функционала с превеликим удовольствием. И я до сих пор не видел такой же мощной альтернативы.
Если вам нужно отрисовать в брауезере просто дерево, то, конечно можно использовать и другие плагины, или вовсе написать это самому и лаконично, но для более широкого функционала — JsTree — просто отличный вариант.
Отличные и понятные примеры [4] можно найти на официальном сайте. Подробная документация так же присутствует [5].
Чтобы начать работу, нам нужно подключить jquery.js, jstree.js(180КБ в несжатом виде) и папку с темами(подключается плагином сама, достаточно положить ее рядом)
Приведу пример использования дерева на основе JSON.
HTML:
<div id="tree"></div>
JQuery:
$("#tree")
.bind("before.jstree", function (e, data) {
// байндинг на событие перед загрузкой дерева
})
.jstree({
// Подключаем плагины
"plugins" : [
"themes","json_data"
],
"json_data" : {
"ajax" : {
"url" : "tree.php", // получаем наш JSON
"data" : function (n) {
// необходиый коллбэк
}
}
},
})
.bind("select_node.jstree", function(e, data){
// байндинг на выделение нода
// укажем ему открытие документа на основе якорей
window.location.hash = "view_" + data.rslt.obj.attr("id").replace("node_","");
})
});
Получаем простое дерево в духе примеров [4]
Пожалуй не буду описывать простыню из других примеров. Вы можете ознакомится с ними на официальном сайте, а вот если есть какие либо конкретные вопросы по теме, с удовольствием отвечу.
Автор: dudeonthehorse
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/14887
Ссылки в тексте:
[1] JsTree: http://jstree.com
[2] упоминалось: http://habrahabr.ru/post/76660/
[3] Страница проекта на гитхабе: https://github.com/vakata/jstree
[4] примеры: http://www.jstree.com/demo
[5] Подробная документация так же присутствует: http://www.jstree.com/documentation
Нажмите здесь для печати.