jsTree父节点与子节点ID相同的兼容解决方案咨询

我明白你遇到的困扰——jsTree默认要求整个树形结构里的节点id是全局唯一的，所以当父节点和子节点用了相同的ID时，组件会因为无法正确识别节点身份而出现异常，比如复选框状态混乱、节点无法正常展开/折叠等。

要实现“嵌套子树使用独立ID列表”的需求，我们可以通过两种思路来解决，核心都是分离组件内部标识和业务ID：

方案一：给子节点ID添加命名空间前缀 #

如果业务上可以接受对ID做轻微修改，最简单的方式就是给子节点的ID加上专属前缀，比如child_、sub_之类的，既保留了业务上的ID含义，又避免了全局冲突。

示例代码：

$('#jstree').jstree({
  'core': {
    'data': [
      {
        'id': '1',
        'text': '父节点1',
        'children': [
          {
            'id': 'child_1', // 添加前缀区分父子节点ID
            'text': '子节点1'
          }
        ]
      }
    ]
  },
  'checkbox': {
    'keep_selected_style': false
  },
  'plugins': ['checkbox']
});

方案二：用自定义data字段存储业务ID（推荐） #

如果业务逻辑要求必须保留子节点的原始ID（比如和后端返回的ID完全对应），那我们可以不用jsTree的id字段来存储业务ID，而是把业务ID放在节点的data属性里。jsTree会自动生成全局唯一的内部ID来管理节点，不会和你的业务ID冲突。

示例代码：

$('#jstree').jstree({
  'core': {
    'data': [
      {
        'id': 'parent_1', // jsTree内部用的全局唯一ID
        'text': '父节点1',
        'data': {'bizId': 1}, // 把业务ID存在自定义的data字段里
        'children': [
          {
            'text': '子节点1',
            'data': {'bizId': 1} // 子节点的业务ID可以和父节点完全重复
          }
        ]
      }
    ]
  },
  'checkbox': {
    'keep_selected_style': false
  },
  'plugins': ['checkbox']
});

当你需要获取选中节点的业务ID时，只需要从节点的data属性中读取即可：

$('#jstree').on('changed.jstree', function(e, data) {
  const selectedBizIds = data.selected.map(nodeId => {
    const node = $('#jstree').jstree(true).get_node(nodeId);
    return node.data.bizId;
  });
  console.log('选中的业务ID:', selectedBizIds);
});

这种方式的优势在于彻底分离了组件内部的标识逻辑和业务数据逻辑，后续扩展其他嵌套层级时也不会再遇到ID冲突的问题，是更健壮的解决方案。

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