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);
    }
});

或者您可以设置标题范围的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);

在jqTree中动态地将HTML / CSS ID分配给节点

2 个答案: