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>';
        }