jstree - 如何从上下文菜单中获取 JsTree 项目的元数据？

Question

在jstree中，我可以右键单击一个节点并从上下文菜单中选择一个项目。在下面的代码中，我尝试使用该obj对象来获取树项。我可以使用$(obj)但是这只是一个 HTML 列表项。我如何获得与之相关的元数据（foo）？

    $(element).jstree(
     "data" : { "data" : {"title" : "An item"}, "metadata":{"foo" :"bar"}},
     "plugins" : ["themes",  "ui", "contextmenu"],
     "contextmenu" : {

      "items" : function($node) {
           return {
             "Menu1" : function(obj){
                 //my menu action
               }         
         };
     };
    }

 );

Answer 1

这是访问元数据的方式。

obj.data().foo

Answer 2

在尝试获取选定 jsTree 节点的 ID 时，我遇到了同样的问题。

可以做到，您只需要创建自己的函数来填充上下文菜单，从 JSON 数据中获取相关值：

jsTree 上下文菜单选择项？

Answer 3

在函数的参数中，contextmenu.items您可以访问当前项目数据。这个动态可调用函数，每次在节点上的新右键单击事件时触发，参见示例：

$('#post-tree').jstree({
  core: {
    data: treeData
  },
  plugins: ['contextmenu'],
  contextmenu: {
    items: function (item) {

      return {
        addPost: {
          label: 'Add new Post',
          action: function () {
            console.log(item.original); // metadata object
          }
        },
        addSubcategory: {
          label: 'Add subcategory',
          action: function () {
            console.log('addSubcategory');
          }
        },
        editCategory: {
          label: 'Properties',
          action: function () {
            console.log('editCategory')
          }
        },
        delete: {
          label: 'Delete',
          action: function () {
            console.log('delete Category');
          }
        }
      };

    }
  }
});