Как получить метаданные jsTree.

Это мой код:

$("#demo1").jstree({
        "themes": {
            "theme": "default",
            "dots": true,
            "icons": true,
            "url": "static/themes/default/style.css"
        },
        "ui" : {
                // this makes the node with ID node_4 selected onload
                "initially_select" : [ location.hash.slice(1).split('@')[1]]
            },
        "json_data" : {
            "data" : [
                { 
                    "data" : "A node", 
                    "attr" : { "id" : "1" ,time:1321},
                    "callback":function(){alert('sss')},
                    "children" : [ 
                        {
                            "data" : "ttt node", 
                            "children" : [ "Child 1", "Child 2" ]   
                        }
                     ]
                },
                { 
                    "attr" : { "id" : "2" }, 
                    "data" : { 
                        "title" : "Long format demo", 
                        "attr" : { "href" : "#" } 
                    } 
                },
                {
                    "data" : "sss node", 
                    "attr" : { "id" : "3" },
                    "children" : [ 
                        {
                            "data" : "bbb node"
                        }
                        ,
                        {
                            "data" : "kkkk node", 
                            "attr" : { "id" : "11" },
                            "children" : [ 
                                {
                                    "data" : "oooo node", 
                                    "children" : [ "pppp", "nnnn" ] 
                                }
                             ]
                        },
                    ]
                },
                {
                    "data" : "wwqq node",
                    "attr" : { "id" : "4" },
                    "children" : [ "Child 1", "Child 2" ]   
                },
                {
                    "data" : "hhh node",
                    "attr" : { "id" : "5" },
                    "metadata ":"i am the metadata",
                    "children" : [ 
                            {
                            "data" : "A node", 
                            "children" : [ 
                                {
                                    "data" : "ttt node", 
                                    "children" : [ "Child 1", "Child 2" ]   
                                }
                                ]
                            },
                            {
                            "data" : "bbb node"
                            }

                        ]   
                },
            ]
        },
        /*
        "sort":function (a, b) { 
            return this.get_text(a) < this.get_text(b) ? 1 : -1; 
            },
        ////*/
        "contextmenu":{
                "show_at_node":false,
                "items":{
                        //"ccp":false,
                        "sort" : {
                            // The item label
                            "label"             : "sort",
                            /* The function to execute upon a click
                            "action"            : function (obj) { 
                                                    var fn=function (a, b) {return this.get_text(a) < this.get_text(b) ? 1 : -1;}
                                                    this.changeSort(obj,fn);

                                                    },
                            //*/
                            // All below are optional 
                            "_disabled"         : false,        // clicking the item won't do a thing
                            "_class"            : "sort",   // class is applied to the item LI node
                            "separator_before"  : false,    // Insert a separator before the item
                            "separator_after"   : true,     // Insert a separator after the item
                            // false or string - if does not contain `/` - used as classname
                            "icon"              : false,
                            "submenu"           : { 
                                "name":{
                                        "label" : "name",
                                        "action": function (obj) { 
                                                        var fn=function (a, b) {return this.get_text(a) < this.get_text(b) ? 1 : -1;}
                                                        this.changeSort(obj,fn);
                                                    }
                                    },
                                "time":{
                                        "label" : "time",
                                        "action": function (obj) { 
                                                        var fn=function (a, b) {return this.get_text(a) < this.get_text(b) ? 1 : -1;}
                                                        this.changeSort(obj,fn);

                                                    }
                                    }
                                }
                        },
                        "icons":{
                            "label"             : "icons",
                            "action":function(obj){window.a=obj;},
                            "submenu"           : { 
                                "apple":{
                                        "label" : "apple",
                                        "action": function (obj) { 
                                                        this.set_theme('apple');
                                                    }
                                    },
                                "classic":{
                                        "label" : "classic",
                                        "action": function (obj) { 
                                                        this.set_theme('classic');
                                                    }
                                    },
                                "default":{
                                        "label" : "default",
                                        "action": function (obj) { 
                                                        this.set_theme('default');
                                                    }
                                    }
                                }

                        }
            }
        },
        "core" : { "initially_open" : [ ] },
        "plugins" : [ "themes", "json_data","crrm","ui","contextmenu","search","sort" ]
    })
    .bind("search.jstree", function (e, data) {
            alert("Found " + data.rslt.nodes.length + " nodes matching '" + data.rslt.str + "'.");
        });

i установить метаданные:

"metadata ":"i am the metadata",

и хотите получить его, когда я щелкните правой кнопкой мыши, в контекстном меню:

"icons":{
                            "label"             : "icons",
                            "action":function(obj){console.log(this.data);},

Я показываю this.data следуйте за этим статья:

// the `metadata` property will be saved using the jQuery `data` function on the `li` node
    metadata : "a string, array, object, etc",

но я не могу понять, что я могу сделать?

Ответ 1

JsTree хранит метаданные с помощью jQuery:

.data("jstree", "a string, array, object, etc")

Для доступа к этим метаданным используйте:

.data("jstree")

Например, как только вы передаете некоторый объект DateTime в формате json:

metadata : { lastModified : "/Date(1283198400000)/" }

Доступ к ней:

$.jstree
.bind("select_node.jstree", function (event, data) {
    alert( formatJsonDateTime( data.rslt.obj.data("jstree").lastModified ) );
});

function formatJsonDateTime(jsonDate) {
    var date = eval(jsonDate.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"));
    return date.format("M/dd/yyyy HH:mm");
};

Ответ 2

Принятый ответ не работает с последней версией jsTree. Здесь приведен пример, основанный на предыдущем.

metadata : { lastModified : "/Date(1283198400000)/" }

Доступ к данным:

$.jstree
.bind("select_node.jstree", function (event, data) {
    alert( data.rslt.obj.data("lastModified") );
});

Ответ 3

вы можете получить полный node с помощью функции get_node из jstree, например

var node = $(container).jstree().get_node("node_id");

тогда вы можете получить доступ к данным из

node.original.metadata

Ответ 4

Ни один из этих решений не работал у меня. Что было сделано:

alert(data.rslt.obj.data()[0].lastModified)

Спасибо

Ответ 5

Я работаю с jstree 1.0-rc3 от 2011-02-09. Прежде всего, я обнаружил, что назначение строки для метаданных, таких как "metadata ":"i am the metadata", не работает. Это должен быть объект JSON. Мое дерево представляет структуру каталогов, начиная с корневой папки "упражнения", поэтому я хочу, чтобы каждый node сохранял путь на сервере, где хранится структура каталогов. Сервер отправляет данные JSON (упрощенные для ясности) следующим образом:

[
    {
        "data":"Book1",
        "metadata":{"path":"exercises\/Book1"},
    },
    {
        "data":"vocabulary",
        "metadata":{"path":"exercises\/vocabulary"}
    }
]

Я использую значение пути из метаданных для создания правильного URL-адреса для запроса AJAX, отправленного при открытии папки, содержащей другие папки или файлы. Свойство url свойства ajax, используемого для настройки дерева, выглядит следующим образом:

"url": function (node) {
    var path = "",
    url = "/tree_service/tree/format/json?path=";
    if(node === -1){
        url += "exercises";
    }
    else{
        path = encodeURIComponent(node.data().path);
        url += path;
    }
    return url;
}

Как и обещано документацией, мы можем использовать функцию data() на node, переданную функции url, и скрываться в возвращаемом объекте - это свойство пути.