cách nhận siêu dữ liệu của jsTree.

Question

Đây là mã của tôi:

$("#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 + "'."); 
     }); 

tôi thiết lập các siêu dữ liệu:

"metadata ":"i am the metadata", 

và muốn nhận được nó khi tôi nhấp chuột phải, vào "ContextMenu":

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

tôi hiển thị this.data theo dõi này article:

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

nhưng tôi không thể làm được, tôi có thể làm gì?

Answer 1

JsTree cửa hàng siêu dữ liệu với jQuery:

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

Để truy cập sử dụng siêu dữ liệu này:

.data("jstree") 

Ví dụ, một khi bạn vượt qua một số DateTime đối tượng trong định dạng json:

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

Truy cập:

$.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"); 
}; 

Answer 2

Câu trả lời được chấp nhận không hoạt động với phiên bản mới nhất của jsTree. Đây là một ví dụ được xây dựng dựa trên phiên bản trước đó.

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

Truy cập dữ liệu:

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

Answer 3

Không ai trong số những giải pháp làm việc cho tôi. Điều gì đã làm như sau:

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

Cảm ơn

Answer 4

Tôi đang làm việc với jstree 1.0-rc3, ngày 2011/2/9. Trước hết, tôi thấy rằng việc gán một chuỗi cho siêu dữ liệu như thế này "metadata ":"i am the metadata" không hoạt động. Nó phải là một đối tượng JSON. Cây của tôi là đại diện cho một cấu trúc thư mục bắt đầu từ thư mục gốc "bài tập" vì vậy tôi muốn mỗi nút để lưu trữ đường dẫn trên máy chủ nơi cấu trúc thư mục được lưu trữ. Các máy chủ gửi đi dữ liệu JSON (giản thể cho rõ ràng) như thế này:

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

tôi sử dụng giá trị con đường từ siêu dữ liệu để xây dựng URL chính xác cho các yêu cầu AJAX gửi đi khi bạn mở một thư mục chứa các thư mục hoặc file khác . Thuộc tính url của tài sản ajax sử dụng để cấu hình các cây trông như thế này:

"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; 
} 

Như đã hứa bởi các tài liệu, chúng ta có thể sử dụng dữ liệu() chức năng vào nút truyền cho hàm url và ẩn nấp trong các đối tượng trả về là thuộc tính path.

Answer 5

bạn có thể nhận được các nút đầy đủ bằng cách sử dụng chức năng get_node từ jstree như

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

sau đó bạn có thể truy cập dữ liệu từ

node.original.metadata