Add clickable button on each node in jstree in jsp

Question

I have list of value in object. I need to add button on each node in jstree.

My code :

This is static code which is working for single value.

$('#tree').jstree({
core:{
    data:[
        '<button>Press</button> One'
    ]
},
plugins:['checkbox']

});

but i want to add button dynamically to each node.

var arrayCollections = ${jsonArray};
$('#jstreesD').jstree({
    'core' : {

            ],
        'data' :[ arrayCollections,'<button>Press</button> Ok'],

    },
})

 <div id="jstreesD"></div>

but this is not working. Is there a way to do like this.

Thanks, VJM

What is `jsonArray` and why are you trying to wrap it with `$()`. And anyway if it is an array you will get 'data: [["button", "button"], "button"]`. And I believe you need 'data': ['button', 'button'] — Leguest, Apr 20 '17 at 12:06
hi Leguest thanks for reply, jsonArray contain data like this var arrayCollection = [ { "id" : "100", "parent" : "#", "text" : "MyData" }, { "id" : "155", "parent" : "MyData", "text" : "Test", }, }); i need to add button on each node — Vimal, Apr 20 '17 at 12:12

Leguest · Answer 1 · 2017-04-20T13:29:05.890

1

I think you could try this:

    $(function () {

        var data =  [ { "id" : "100", "parent" : "#", "text" : "MyData" }, { "id" : "155", "parent" : "MyData", "text" : "Test", } ]

        $('#jstree').jstree({
            'core' : {
                'data' : data.map(function(item){

                    return "<button>Press</button>" + item.text
                })

            }
        });
    });

JSFiddle Example

edited Apr 20 '17 at 13:29

answered Apr 20 '17 at 12:30

Leguest

2,097
2
17
20

thanks, but in this way I get javascript exception 'Uncaught ReferenceError: data is not defined' and in screen only one button display without any data. – Vimal Apr 20 '17 at 12:36
I solved that error but now data not display treeview format based on parent id, direct display as simple entry in screen with button. – Vimal Apr 20 '17 at 12:42
I am not sure, I think you need reassemble your data, because jsTree looks for `children`, not for parentId – Leguest Apr 20 '17 at 13:10
Yes may be, but without button my data display properly in jstreeview. – Vimal Apr 20 '17 at 13:18
Create jsfiddle with your data, maybe I can help you – Leguest Apr 20 '17 at 13:29
Lets work here (http://jsfiddle.net/Legendary/zpshgp04/2/), because in your jsfiddle you did not add any libraries. Anyway even with your data, I don't think they are properly displayed – Leguest Apr 20 '17 at 13:57
Yes data display properly in your jsfiddle, now I need this data with button, also current data not display in treeview. thanks for your help. – Vimal Apr 20 '17 at 14:07
Hi Leguest, can you check http://jsfiddle.net/vkumar111/zpshgp04/15/ why getting undefined. – Vimal Apr 24 '17 at 03:35
@VJM You can use the `data` field in the node to carry extra data - see [this answer](https://stackoverflow.com/a/23359311/2877364) – cxw Aug 10 '17 at 21:10

Add clickable button on each node in jstree in jsp

1 Answers1