我想要一些非常简单的事情:
一个jQuery小部件,它呈现了一个可折叠的树。我希望国家得救。我想控制初始状态。我希望它看起来非常漂亮。当用户点击链接时,我希望它在那里导航。容易。
在我看来,Jqtree就像我正在寻找的那样,但是查看所有文档我没有看到表示树中节点的URL的简单情况。
答案 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>';
}