jstree图标以及如何"点击展开"

Question

我正在使用jsTree来创建文档列表索引.我使用JSON来创建我的树.我有一个问题和一个问题.

我的问题是,对于文件夹和文件都会出现相同的图标(类型中设置的默认图标).当我更改默认图标时,所有树图标都设置为该图标.如果我不使用类型插件,则默认文件夹图标用于所有图标.

jstree配置:

$("#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:

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

图标在数据字典中设置,如sjtree文档中所示.但它没用.我没有得到任何错误,一切都很好,除了树的icond.

我的第二个问题是,如何配置jstree,所以当我单击父节点(文件夹)时,它将展开,就好像展开了箭头一样.

Answer 1

您的响应数据需要如下所示:

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

这是一个包含一个节点的数组,但您可以在数组中返回多个以创建多个节点.

这"state":"closed"是告诉jsTree在单击/展开时从您的服务器请求子节点的关键.

该"rel" : "folder"通知jsTree使用中定义的文件夹类型"types",你上面有节点.然后"folder"使用为该类型指定的图标.

Answer 2

要创建单击以展开行为,可以使用types插件覆盖默认的单击行为:

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