Geek Answers Handbook

Jstree icon & how to 'click to expand'

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

My problem is that the same icon is displayed for both folders and files (default icon set). When I change the default icon, all tree icons are installed on this icon. If I do not use type plugins, the default folder icon is used for all icons.

Jstree configuration:

$("#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/"
        }
    }
});

JSON example:

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

installed in the data dictionary, as shown in the sjtree documentation. But it is useless. I do not get errors, everything is fine except icond tree.

: jstree, , node (), , .

+5
2

:

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

node, .

"state":"closed" - , jsTree /.

"rel" : "folder" jsTree , "types" node, . , "folder".

+7

, , :

"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" ]
+6

More articles:


All Articles