different tree view icons and enable/disable checkboxes in jstree

Question

I need to change the tree view icons and enable/disable checkboxes
please view the code below :

function LoadJSTree() {
        $.noConflict();

        $(function () {
            $('#demoTree').jstree({
                'checkbox': {
                    'keep_selected_style': false,
                    'two_state': true
                },
                "types": {
                    "#": {
                        "max_children": 1,
                        "max_depth": 4,
                        "valid_children": ["root"]
                    },
                    "root": {
                        "icon": "/static/3.1.1/assets/images/tree_icon.png",
                        "valid_children": ["default"],
                        "check_node": false,
                    },
                    "default": {
                        "valid_children": ["default", "file"],
                        "check_node": true,
                        "uncheck_node": true
                    },
                    "disabled":{
                        "check_node": false,
                        "uncheck_node": false

                    },

                    "file": {
                        "icon": "glyphicon glyphicon-file",
                        "valid_children": [],
                        "check_node": true,
                        "uncheck_node": true

                    }
                },

                "plugins": ["types"],
                'core': {
                    'data': [
                        {
                            "text": "Root node", "type": "root", "parent":"#", "children": [
                                  { "text": "Child node 1", "type": "default" },
                                  { "text": "Child node 2", "type": "default" },
                                  { "text": "Child node 3", "type": "default" },
                                  { "text": "Child node 4", "type": "default" },
                                  { "text": "Child node 5", "type": "default" },
                                  { "text": "Child node 6", "type": "default" },
                                  { "text": "Child node 7", "type": "default" },
                                  { "text": "Child node 8", "type": "default" }
                            ]
                        }
                    ],

                },
                'plugins': ["checkbox"]
            });

It doesn't seem to work.

The tree is displayed using same folder icons for every node and check box always present for every node, shouldn't it come disabled for "root" node? Could you please let me know what's wrong?

score 1 · Accepted Answer · edited May 23 '17 at 11:52

You have listed plugins twice in your config:

"plugins": ["types"],
...
'plugins': ["checkbox"]

Change that to a single entry:

"plugins": ["checkbox", "types"]

However keep in mind there is no option (in v.3, if that is the version you are using) to prevent actions based on the type of the node. But using the most recent jsTree commit you can disable checkboxes on a per node basis using the state property of the node (you can also disable the whole node) - if that is what you need have a look here:
jsTree disable some of the checkboxes

different tree view icons and enable/disable checkboxes in jstree

1 Answers1