JQtree:将url与节点相关联

时间:2013-12-21 01:53:33

标签: jquery jqtree

我想要一些非常简单的事情:

一个jQuery小部件,它呈现了一个可折叠的树。我希望国家得救。我想控制初始状态。我希望它看起来非常漂亮。当用户点击链接时,我希望它在那里导航。容易。

在我看来,Jqtree就像我正在寻找的那样,但是查看所有文档我没有看到表示树中节点的URL的简单情况。

  • 根据我的要求,您是否同意Jqtree是正确的解决方案?
  • 在某个地方是否有一个有用的样本我可以看看我的案件是如何处理的?

2 个答案:

答案 0 :(得分:2)

节点只是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 event

$('#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;
        }
    }
);

答案 1 :(得分:2)

对于后代,我建议这样做以将项目保留为本机链接,以便保留在新标签/窗口中打开的功能,复制网址等。

(假设你的节点像其他答案一样存储了网址)

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