Dynamically Assigning HTML/CSS Ids to Nodes in jqTree

Question

In jqTree, putting the following code in a JavaScript block at the top of an HTML file will generate a small treeview.

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

So far, this is working great for me. However, I want to be able to give each node and/or child an id in HTML/CSS so that I can change the color of each node/child depending on its status in my app. The HTML for the treeview is dynamically created in the $(function()) call, so I can view it in my debugger or element inspector, but I can't really edit it.

Any suggestions on how to go about this?

--

jqTree has a way of assigning ids to nodes as part of the data declaration, like this:

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

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

However, it seems that those ids are not HTML ids, because they aren't showing up in my element inspection.

I'm guessing there's a JScript function that would let me modify the node returned by that getNodeById function to give it an HTML id, but if anyone can think of an easier or more straightforward way I'd prefer that. Although my current setup has the nodes hard-coded into my file, I'll eventually be generating them dynamically, maybe using JSON, so a solution that works with that would be great.

Answer 1

You could use the onCreateLi option. This option allows you to change the html of the nodes using a callback.

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

Or you can set the id of the title span:

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

        $span.attr('id', node.id);
    }
});