JsTree row style

182 Views Asked by At

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>

0

There are 0 best solutions below