Динамическое назначение идентификаторов HTML/CSS для узлов в jqTree

Question

В jqTree размещение следующего кода в блоке JavaScript в верхней части HTML-файла приведет к созданию небольшого дерева.

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

Пока это работает отлично для меня. Однако я хочу иметь возможность дать каждому узлу и / или дочернему элементу идентификатор в HTML/CSS, чтобы я мог изменить цвет каждого узла / дочернего элемента в зависимости от его статуса в моем приложении. HTML-код для дерева динамически создается в $(function()) вызов, чтобы я мог просмотреть его в моем отладчике или инспекторе элементов, но я не могу действительно редактировать его.

Любые предложения о том, как это сделать?

-

У jqTree есть способ назначать идентификаторы узлам как часть объявления данных, например:

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

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

Однако кажется, что эти идентификаторы не являются идентификаторами HTML, потому что они не отображаются в моем элементе проверки.

Я предполагаю, что есть функция JScript, которая позволила бы мне изменить узел, возвращаемый этой функцией getNodeById, чтобы дать ему HTML-идентификатор, но если кто-то может придумать более простой или более простой способ, я бы предпочел это. Несмотря на то, что в моей текущей установке узлы жестко запрограммированы в моем файле, в конечном итоге я буду генерировать их динамически, возможно, с использованием JSON, поэтому решение, которое будет работать с этим, было бы замечательно.

Answer 1

Вы можете использовать опцию onCreateLi. Эта опция позволяет вам изменять html узлов, используя обратный вызов.

$('#tree1').tree({
    data: data,
    onCreateLi: function(node, $li) {
        $li.attr('id', node.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

Дайте каждому узлу класс, а затем установите идентификатор этого класса

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

а потом

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