jsTree v 3+：如何在制作 jsTree 时使用 JSON 格式为“类型”插件传递 [类型] 信息？

Posted 2023-05-09

【中文标题】jsTree v 3+：如何在制作 jsTree 时使用 JSON 格式为“类型”插件传递 [类型] 信息？

【英文标题】：jsTree v 3+ : How to pass [Type] information for the 'Types' plugin using the JSON format in making a jsTree?

【发布时间】：2014-08-29 17:42:15

【问题描述】：

我想使用http://www.jstree.com/docs/json/ 给出的“使用 JSON 填充树”中的 JSON 格式创建一个 jsTree(v 3.0.2)

// Expected format of the node (there are no required fields)

  id          : "string" // will be autogenerated if omitted
  text        : "string" // node text
  icon        : "string" // string for custom
  state       : 
    opened    : boolean  // is the node open
    disabled  : boolean  // is the node disabled
    selected  : boolean  // is the node selected
  ,
  children    : []  // array of strings or objects
  li_attr     :   // attributes for the generated LI node
  a_attr      :   // attributes for the generated A node

从实例中，我使用以下方法创建树：

// create the instance
$('#jstree').jstree(

  "core": 
    "animation": 150,
    "check_callback":true,
    'data': new_data //json object
  ,
  "types": 
    "#": 
      "valid_children": ["folder"]
    ,
    "folder": 
      "valid_children": ["file"]
    ,
    "file": 
      "valid_children": [""]
    
  ,
  "plugins": ["dnd", "search", "wholerow", "types"]
);

我想确保文件夹不会进入其他文件夹，文件不会进入其他文件。文件只在文件夹中。

我想知道如何在我的 json 对象 (new_data) 中传递“类型”信息，以便应用类型。

我已经能够让$("#jstree").jstree("set_type", $(this), "file"); 方法工作，但我不喜欢脏检查方法。另外，我希望将类型应用于 JSON 中，并且 NOT 外部

另外，我不想在拖放时使用这些方法来执行检查。我希望在可以/不可以将元素放在另一个地方时出现视觉提示（请参见下面的屏幕截图）

【参考方案1】：

对于 jstree 3.x 版本：回答关于如何通过 JSON 对象中的“类型”信息，您必须声明与其他节点属性（如 id、文本）处于同一级别的类型属性。例如，节点的更新格式现在看起来像这样。注意添加了 type 属性。

// Expected format of the node (there are no required fields)

  id          : "string" // will be autogenerated if omitted
  text        : "string" // node text
  icon        : "string" // string for custom
  state       : 
    opened    : boolean  // is the node open
    disabled  : boolean  // is the node disabled
    selected  : boolean  // is the node selected
  ,
  children    : []  // array of strings or objects
  li_attr     :   // attributes for the generated LI node
  a_attr      :   // attributes for the generated A node
  type        : "string"

一个示例节点 json 表示看起来像

"id":"179356","text":"Node Name 1","state": "opened":false,"disabled":false,"selected":false,"children":true,"li_attr": "nodeType":"C","itemId":"12345","type":"file"

链接中也讨论了这个问题： https://github.com/vakata/jstree/issues/473