JQtree: ассоциирование URL с узлом

Question

Я хочу что-то очень простое:

JQuery-виджет, представляющий дерево, которое можно свернуть. Я хочу сохранить государство. И я хочу контролировать исходное состояние. Я хочу, чтобы это выглядело очень красиво. И когда пользователь нажимает на ссылку, я хочу, чтобы она там перемещалась. Легко.

Мне кажется, что Jqtree - это то, что я ищу, но просматривая все документы, я не вижу простого случая указания URL, который идет с узлом в дереве.

• Учитывая мои требования, вы согласны с тем, что Jqtree является правильным решением?
• Есть ли полезный пример, где я могу посмотреть, как обрабатывается мой случай?

Спасибо!

Answer 1

Узлы - это просто объекты Javascript, поэтому вы можете просто добавить другое свойство для URL. Так, например, адаптируем то, что есть на сайте jqTree:

var data = [
    {
        label: 'node1',
        url: 'MyUrl.html',
        children: [
            { label: 'child1', url: 'anotherURL.html' },
            { label: 'child2', url: 'andAnotherURL.html' }
        ]
    },
    {
        label: 'node2',
        url: 'www.your.get.the.point.com',
        children: [
            { label: 'child3', url: 'google.com' }
        ]
    }
];

Очевидно, что jqTree по умолчанию ничего с этим не сделает, так что вам придется с этим справиться, но всякий раз, когда вы сможете получить узел, вы сможете получить его .url:

var theURL = myNode.url;

Так, например, похоже, что у jqTree есть событие tree.click:

$('#tree1').bind(
    'tree.click',
    function(event) {
        // The clicked node is 'event.node'
        var node = event.node;
        var theURL = node.url;
        if (theURL) {
            location.href = theURL;
        }
    }
);

Answer 2

Для потомков я бы вместо этого предложил сделать это таким образом, чтобы элементы оставались родными ссылками, чтобы сохранить возможность открывать их в новой вкладке / окне, копировать URL и т. Д.

(Предполагая, что ваши узлы хранят URL, как в другом ответе)

 $tree.tree({
     data = whatever;
     onCreateLi: function(node, $li) {
         $li.find('.jqtree-title').wrap('<a href="' + node.url + '"></a>');
     }
 });

ОБНОВИТЬ:

Это более чем в два раза быстрее, что очень важно для моего огромного дерева!

  onCreateLi: function(node, $li) {
        var a = $li.find('span')[0];
        a.outerHTML = '<a href="' + node.href + '">' + a.outerHTML + '</a>';
        }