I'm trying to style specific rows in my jsTree. Is there a way how can I change color which depends on JSON value (if I send "isVisible")? For example, I have X records, some of them are visible to the end-user and in my dashboard, I would like to highlight rows that are shown to the user (give them green background). How can I achieve that? Are there some callbacks? Thanks for the help.
Here is my example:
$(function () {
$('#jstree').jstree({
'core': {
'data': [{
"id": "1",
"text": "Fresh Products",
"state": {
"opened": false,
"disabled": false,
"selected": false
},
"children": [{
"id": "11",
"text": "Ethnic & Specialty",
"state": {
"opened": false,
"disabled": false,
"selected": false
},
"children": false,
"liAttributes": null,
"aAttributes": null
}, {
"id": "7",
"text": "Seafood",
"state": {
"opened": false,
"disabled": false,
"selected": false
},
"children": false,
"liAttributes": null,
"aAttributes": null
}],
"liAttributes": null,
"aAttributes": null
}, {
"id": "6",
"text": "HBC/Non-Foods",
"state": {
"opened": false,
"disabled": false,
"selected": false
},
"children": [],
"liAttributes": null,
"aAttributes": null
}]
},
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="jstree"></div>