jstree icon & how to 'click to expand'

Question

I am using jsTree for creating a documentation list index. I use JSON to create my tree. I have a problem and a question.

My problm is, the same icon (default icon set in types) appears for both folders and files. When i change the default icon, all tree icons set to that icon. If I do not use types plug-in, default folder icon is used for all icons.

jstree config:

$("#agac_tutacagi").jstree({
    "plugins" : [ "themes", "json_data", "types", "ui"],

    "core":{
        "animation":500,
        "strings":{
            "loading":"Yükleniyor"
        }
    },

    "types":{
        "types":{
            "max_children" : -2,
            "max_depth" : -2,

            "folder" : {
                "valid_children" : [ "default", "dizin", "dosya" ],
                "icon" : {
                    "image" : "/static/p/js/jsTree/_demo/folder.png"
                }
            },
            "file" : {
                "valid_children" : "none",
                "icon" : {
                    "image" : "/static/p/js/jsTree/_demo/file.png"
                }
            },
            "default" : {
                "icon" : {
                    "image" : "/static/p/js/jsTree/_demo/file.png"
                }
            }
        }
    },

    "json_data" : {
        "ajax" : {
            "url" : "/dokumantasyon/dokumanAgaciOgesiAl/"
        }
    }
});

Sample JSON:

[{
  "data": {
    "icon": "folder",
    "title": "Sıkça Sorulan Sorular"
  },
  "children": [{
    "data": {
      "icon": "file",
      "attr": {
        "onclick": "dokuman_getir(4)"
      },
      "title": "Program makbuz basmadı"
    }
  }]
}]

icon is set within data dictionary, as it is shown in sjtree documentation. But it is useless. I get no error, everything is fine except the icond of the tree.

My second question is, how can i configure jstree, so when I click a parent node ( a folder) it will expand as if expand arrow had clicked.

Solution 1

Your response data needs to look like this:

[{"attr":{"id":"node_2","rel":"folder"},"data":"root","state":"closed"}]

This is an array with one node, but you could return multiple in the array to create multiple nodes.

The "state":"closed" is the key to tell the jsTree to request the child nodes from your server when clicked/expanded.

The "rel" : "folder" tells the jsTree to use the folder type defined in the "types" node you had above. Then the icon specified for the "folder" type is used.

Solution 2

In order to create a click to expand behaviour, you can use the types plugin to override the default click behaviour:

"types":{
    "types":{
        "max_children" : -2,
        "max_depth" : -2,
        "default" : {
            "valid_children" : [ "default"],            
            "select_node" : function (e) {
                this.toggle_node(e);
                return false;
            }
        },
        ...
    "plugins" : [ "themes", "html_data", "ui","types" ]