在 jsTree 中，我们如何在替换树后初始选择节点？答案

【问题标题】：In jsTree, how can we have nodes initially selected after replacing tree?在 jsTree 中，我们如何在替换树后初始选择节点？
【发布时间】：2017-12-07 13:19:00
【问题描述】：

在 jsTree 中，我想绘制一棵新树来替换之前的树，并在新树中初始选择节点。

在下面的代码中，我确认state : {opened : true} 使节点最初打开，state : {disabled : true} 使节点最初禁用，所以我认为state : {selected : true} 也可以，但实际上并非如此。

请注意，在调用$('#using_json').jstree({...}); 时指定state : {selected : true} 会导致按照https://www.jstree.com/docs/json/ 中的描述选择节点。然后，我想知道为什么当我用新树替换现有树时state : {selected : true} 不起作用（而state : {opened : true} 和state : {disabled : true} 正在工作）。

替换树后如何实现节点被初始选中？

$('#using_json').jstree({ 'core' : {
    data : [
      {
         text : 'Previous root node',
      }
    ]
} });

const newData = [
       {
         text : 'New root node (Initially opened)',
         state : {
           opened : true,       //'opened' takes effect after refresh
         },
         children : [
           { text : 'Child 1 (Initially disabled)',
             state : {
               disabled : true, //'disabled' takes effect after refresh
             }
           },
           { text : 'Child 2 (Intended to be selected initially but failing)',
             state : {
               selected : true  //'selected' does NOT take effect after refresh
             }
           }
         ]
      }
    ]

$('#using_json').jstree(true).settings.core.data = newData;
$('#using_json').jstree(true).refresh(true);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/themes/default/style.min.css" />
</head>
<body>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/jstree.min.js"></script>
  <div id="using_json"></div>
</body>
</html>

【问题讨论】：

标签： javascript jstree

【解决方案1】：

您可以在初始化树时尝试使用select_node 配置属性，您可以只执行一次。为此，您需要向节点添加一些 ID，以便您可以引用所选节点：

$('#using_json').jstree({
  'core': {
    select_node: 'c2',
    data: [{
      text: 'Root node after Refresh (Opened)',
      state: {
        opened: true, //'opened' takes effect after refresh
      },
      children: [{
        text: 'Child 1 (Disabled)',
        id: 'c1',
        state: {
          disabled: true, //'disabled' takes effect after refresh
        }
      }, {
        text: 'Child 2 (Intended to be selected but failing)',
        id: 'c2',
        state: {
          selected: true //'selected' does NOT take effect after refresh
        }
      }]
    }]
  }
});

//$('#using_json').jstree(true).settings.select_node = 'c2';
//$('#using_json').jstree(true).refresh(true);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/themes/default/style.min.css" />
</head>
<body>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/jstree.min.js"></script>
  <div id="using_json"></div>
</body>
</html>

也请查看此answer。

刷新的替代方案

由于 OP 需要保留初始代码结构（初始化 -> 更改配置数据 -> 刷新），另一种解决方案是通过使用刷新事件的回调来“强制”选择：

$('#using_json').jstree({
  'core': {
    data: [{
      text: 'Previous root node',
    }]
  }
});

const newData = [{
  text: 'New root node (Initially opened)',
  state: {
    opened: true, //'opened' takes effect after refresh
    selected: true
  },
  children: [{
    text: 'Child 1 (Initially disabled)',
    id: 'c1',
    state: {
      disabled: true, //'disabled' takes effect after refresh
    }
  }, {
    text: 'Child 2 (Intended to be selected initially but failing)',
    id: 'c2',
    state: {
      selected: true //'selected' does NOT take effect after refresh
    }
  }]
}];

$('#using_json').jstree().settings.core.data = newData;
//$('#using_json').jstree(true).settings.select_node = 'c2';
$('#using_json').jstree(true).refresh(true);
$('#using_json').on("refresh.jstree", function(e) {
  $('#using_json').jstree('select_node', 'c2');
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/themes/default/style.min.css" />
</head>
<body>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.4/jstree.min.js"></script>
  <div id="using_json"></div>
</body>
</html>

【讨论】：

我希望在第一次创建树时选择节点not，但在将其替换为另一棵新树之后。（这就是我将newData 分配给$('#using_json').jstree(true).settings.core.data 并致电$('#using_json').jstree(true).refresh(true); 的原因。）抱歉措辞有误导性。我重新表述了我的问题。
当调用$('#using_json').jstree({...}); 时，指定state : {selected : true} 确实会按照jstree.com/docs/json 中的描述选择节点。
我明白你的意思 - 在这种情况下，我提出了一个带有刷新的替代版本。问候，