js tree

// 示例代码：使用 jsTree 创建一个简单的树结构

// 引入 jsTree 库 (确保在 HTML 文件中已经引入了 jsTree 的 CSS 和 JS 文件)

// HTML 结构
/*
<div id="jstree">
  <!-- 树结构将在这里渲染 -->
</div>
*/

// JavaScript 代码
$(function() {
  // 初始化 jsTree
  $('#jstree').jstree({
    'core' : {
      'data' : [
        { "text" : "父节点 1", "children" : [
          { "text" : "子节点 1" },
          { "text" : "子节点 2" }
        ]},
        { "text" : "父节点 2", "children" : [
          { "text" : "子节点 3" },
          { "text" : "子节点 4" }
        ]}
      ]
    }
  });

  // 添加事件监听器，例如点击节点时触发
  $('#jstree').on("changed.jstree", function (e, data) {
    if(data.selected.length) {
      alert('你选择了: ' + data.instance.get_node(data.selected[0]).text);
    }
  });
});

// 解释说明：
// 1. 通过 `$('#jstree').jstree({...})` 初始化 jsTree，并传入配置对象。
// 2. 在 `core.data` 中定义了树的结构，包括父节点和子节点。
// 3. 使用 `changed.jstree` 事件监听器来捕获用户选择节点的操作，并弹出所选节点的文本内容。