2

在 jqTree 中，将以下代码放在 HTML 文件顶部的 JavaScript 块中将生成一个小的树视图。

var data = [
{
    label: 'node1',
    children: [
        { label: 'child1' },
        { label: 'child2' }
    ]
},
{
    label: 'node2',
    children: [
        { label: 'child3' }
    ]
}
];
$(function() {
    $('#tree').tree({
        data: data
    });
});

到目前为止，这对我来说非常有用。但是，我希望能够在 HTML/CSS 中为每个节点和/或子节点提供一个 id，以便我可以根据其在我的应用程序中的状态更改每个节点/子节点的颜色。树视图的 HTML 是在$(function())调用中动态创建的，因此我可以在调试器或元素检查器中查看它，但我无法真正编辑它。

关于如何解决这个问题的任何建议？

--

jqTree 有一种将 id 分配给节点的方法，作为数据声明的一部分，如下所示：

var $tree = $('#tree1');
var data = [
    { id: 10, name: 'n1' },
    { id: 11, name: 'n2' }
];

$tree.tree({
    data: data
});
var node = $tree.tree('getNodeById', 10);

但是，这些 id 似乎不是 HTML id，因为它们没有出现在我的元素检查中。

我猜有一个 JScript 函数可以让我修改 getNodeById 函数返回的节点，给它一个 HTML id，但如果有人能想到更简单或更直接的方法，我会更喜欢。尽管我当前的设置已将节点硬编码到我的文件中，但我最终将动态生成它们，可能使用 JSON，因此可以使用的解决方案会很棒。

4

2 回答 2

5

您可以使用onCreateLi选项。此选项允许您使用回调更改节点的 html。

$('#tree1').tree({
    data: data,
    onCreateLi: function(node, $li) {
        $li.attr('id', node.id);
    }
});

或者您可以设置标题跨度的 id ：

$('#tree1').tree({
    data: data,
    onCreateLi: function(node, $li) {
        var $span = $li.children('.jqtree-element').find('span.jqtree-title');

        $span.attr('id', node.id);
    }
});
于 2013-08-01T13:14:10.097 回答
0

给每个节点一个类，然后设置该类的 id

var data = [
    { class: '10' },
    { class: '11' }
];

接着

 $(".10").attr('id', 10);
于 2013-07-29T19:05:36.357 回答