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

Question

在 jqTree 中，将以下代码放在 HTML 文件顶部的 JavaScript block 中将生成一个小 TreeView 。

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

到目前为止，这对我来说效果很好。但是，我希望能够在 HTML/CSS 中为每个节点和/或子节点提供一个 id，以便我可以根据其在我的应用程序中的状态更改每个节点/子节点的颜色。 TreeView 的 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);
    }
});

或者您可以设置title 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);
    }
});