为jqTree中的节点动态分配HTML/CSS ID

Question

在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，所以使用它的解决方案会很好。

Answer 1

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

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

或者您可以设置标题span:的id

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

Answer 2

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

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

然后

 $(".10").attr('id', 10);