如何在jsTree中实现节点展开时懒加载子节点？

这其实是jsTree里很常见的**懒加载（lazy loading）**场景，刚好jsTree原生就支持这个功能，我帮你调整下代码就能实现需求：

修改后的完整代码 #

$('#jstree_demo_div').jstree({
  'core': {
    'data': function (obj, cb) {
      // obj代表当前需要加载子节点的父节点
      if (obj.id === "#") {
        // 根节点加载时，只返回A节点，标记它有子节点（children: true）
        cb.call(this, [{
          id: "A",
          text: "A",
          icon: undefined,
          state: {
            opened: false,
            disabled: false,
            selected: false
          },
          children: true, // 关键：告诉jsTree这个节点有子节点，需要懒加载
          li_attr: {},
          a_attr: {}
        }]);
      } else if (obj.id === "A") {
        // 当A节点被展开时，返回它的子节点B
        cb.call(this, [{
          id: "B",
          text: "B",
          icon: undefined,
          state: {
            opened: false,
            disabled: false,
            selected: false
          },
          children: [], // B没有子节点，所以设为空数组
          li_attr: {},
          a_attr: {}
        }]);
      } else {
        // 其他节点如果没有子节点，返回空数组
        cb.call(this, []);
      }
    }
  }
});

关键要点说明 #

• children: true的作用：给A节点加上这个属性后，jsTree会自动显示展开箭头，并且在用户点击展开时触发core.data的回调，请求该节点的子节点数据。
• 通过obj.id判断加载逻辑：回调里的obj参数包含了当前触发加载的父节点信息，我们可以根据它的id来决定返回哪些子节点数据。
• 懒加载的时机：初始页面加载时，只会在DOM中渲染A节点；只有当用户第一次点击展开A节点时，B节点才会被请求并添加到DOM中，完全符合你的需求。

内容的提问来源于stack exchange，提问作者omega