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.

Henk Jansen · Accepted Answer · 2013-08-05 12:19:11Z

5

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

edited Aug 5, 2013 at 12:19

answered Aug 1, 2013 at 13:14

Henk Jansen

662 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

caps Over a year ago

That seems like it could work. I'm trying it, but Firefox is giving me the following error on the onCreateLi line: [17:02:17.369] SyntaxError: missing } after property list

caps Over a year ago

Ah, I forgot the "," after data.

caps Over a year ago

This, works, and I like it much better than the other solution since it happens dynamically for each list item at runtime. However, is there a way I could use that same function to assign an id to one of the other objects inside $li, like the <div> or better yet, the <span> inside the <div>?

Henk Jansen Over a year ago

Added example for changing id of title span

Armen · Accepted Answer · 2013-07-29 19:05:36Z

0

Give each node a class and then set id of that class

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

and then

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

answered Jul 29, 2013 at 19:05

Armen

1,0932 gold badges11 silver badges18 bronze badges

Collectives™ on Stack Overflow

Dynamically Assigning HTML/CSS Ids to Nodes in jqTree

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related