1

我想要一些非常简单的东西：

一个 jQuery 小部件，它呈现可折叠的树。我希望保存状态。我想控制初始状态是什么。我希望它看起来非常漂亮。当用户点击一个链接时，我希望它导航到那里。简单的。

在我看来，Jqtree 是我正在寻找的东西，但是通过查看所有文档，我看不到指示与树中的节点一起使用的 url 的简单情况。

  • 鉴于我的要求，您是否同意 Jqtree 是正确的解决方案？
  • 是否有有用的样本可以查看我的案件是如何处理的？
4

2 回答 2

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 事件：

$('#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;
        }
    }
);
于 2013-12-21T03:10:53.727 回答
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>';
        }
于 2016-03-04T19:02:06.557 回答