<script src="/resources/js/jstree/jquery.cookie.js"></script>
<script src="/resources/js/jstree/jquery.hotkeys.js"></script>
<script src="/resources/js/jstree/jquery.jstree.js"></script>

<div id="categoryTree" style="width: 20%; height: 800px; overflow: auto;">
</div>
 
<script type="text/javascript">
    $('#categoryTree').jstree({
        themes: {
            theme: 'default', // название темы, для смены темы поменять url недостаточно, нужно ещё и сменить название (т.к. названия стилей содержат в себе его)
            url: '/resources/css/jstree/themes/default/style.css' // URL к файлу стилей (рядом должны лежать картинки, как в архиве с плагином)
        },
        json_data: { // это всё конфигурация плагина 'json_data'
            data: [ // тестовые данные - массив из объектов, в каждом из которых есть набор атрибутов и массив дочерних элементов
                {
                    // заголовок элемента, может быть представлен не только строкой, но и объектом (см документацию по json_data)
                    // это может быть использовано для того, чтобы установить дополнительные атрибуты ссылке (тегу <a>), генерируемой при конвертации
                    // json-данных в код разметки
                    data: "First node",
                    attr: { // attr
                        id: 1
                    },
                    state: 'open', // по наличию одного из ключей 'state' или 'children' jsTree определяет, что этот узел содержит детей
                    children: [
                        {
                            data: "Child1",
                            attr: {
                                id: 3
                            }
                        },
                        {
                            data: "Child2",
                            attr: {
                                id: 4
                            }
                        }
                    ]
                },
                {
                    data: "Second node - leaf",
                    attr: {
                        id: 2
                    }
                }
            ]
        },
        // тут мы перечисляем все плагины, которые используем
        plugins: [ 'themes', 'json_data', 'ui' ]
    });
</script>

json_data: {
    // часть опций соответствует опциям, которые доступны для установки в jQuery.ajax() вызове - например url, type
    // с другой стороны, success и data - семантически отличаются от их аналогов в jQuery ajax options -
    // success не только является callback'ом успешного ajax-запроса, но и должна возвращать данные для jsTree
    // а на функцию data как и в jquery ajax options, возлагается задача подготовить параметры для ajax запроса
    // но здесь в эту функцию будет передана нода, для которой будет выполняться ajax-запрос, то есть смысл функции несколько изменяется
    ajax: {
        url: '/child_categories',
        type: 'post',
        // вызывается для ноды перед тем как jsTree будет получать выполнять ajax-запрос
        // задача функции - "сконвертировать" ноду в набор параметров для ajax-запроса
        data: function(node) {
            if (node.attr) {
                return {
                    categoryId: node.attr('categoryId')
                }
            } else return {};
        },
        // а задача этой функции - обратная, "сконвертировать" данные, полученные в результате
        // выполнения ajax-запроса, в данные, нужные для jsTree
        success: function(data) {
            // for each item in array
            var arr = [];
            var i = 0;
            data.map(function(item) {
                if (!item.leaf) {
                    arr[i] = {
                        data: item.name,
                        // даём понять jstree, что эта нода имеет детей
                        state: 'closed'
                    };
                } else {
                    arr[i] = {
                        data: item.name
                    }
                }
                // добавляем атрибуты к ноде, их потом можно будет получить
                arr[i].attr = {
                    categoryId : item.id,
                    hasChildren: !item.leaf
                };
                i++;
            });
            return arr;
        }
    }
}

    // получаем экземпляр jsTree по нашему контейнеру
    var jsTree = $.jstree._reference($('#categoryTree'));
    // вызываем функцию из API плагина 'ui'
    var selectedItems = jsTree.get_selected();
    // это массив
    if (selectedItems.length == 0) {
        alert('Выберите категорию');
        return false;
    }
    // получать данные можно только те, которые сохранены в атрибутах
    // поэтому и нужно их создавать при построении дерева
    var firstNodeHasChildren = selectedItems[0].attributes['hasChildren'].value;

contextmenu: {
    select_node: true,
    // items можно определить как функцию от ноды, и для каждой ноды таким образом определить свой набор
    // элементов меню. Другого способа сделать различные наборы (разные disabled/enabled к примеру) элементов,
    // судя по всему, нет
    items: function(node) {
        return {
            // убираем элементы по умолчанию
            create: false,
            rename: false,
            remove: false,
            ccp: false,
            // добавляем свои
            import: {
                label: 'Вывести в CSV',
                _disabled: node.attr('hasChildren') === 'true',
                action: function() {
                    // в эту функцию также передаётся нода, но нам она ни к чему, поскольку
                    // уже имеется замыкание на переменную node, и мы можем использовать её
                    if (node.attr('hasChildren') !== 'true') {
                        var categoryId = node.attr('categoryId');
                        window.open('/import?categoryId=' + categoryId, '_blank');
                    }
                }
            }
        }
    }
}

// to expand nodes by clicking on it
$("#categoryTree").bind("select_node.jstree", function (event, data) {
    // data.inst is the tree object, and data.rslt.obj is the node
    return data.inst.toggle_node(data.rslt.obj);
});