Question

在jsTree中，我想绘制一个替换前一个树的新树，并在新树中最初选择节点。

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

请注意，在调用state : {selected : true}时指定$('#using_json').jstree({...});会导致选择节点，如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>

Answer 1

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

＆＃13;

$('#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);

＆＃13;

<!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>

＆＃13;

同时查看此answer。

替代刷新

由于OP需要保持初始代码结构（init - ＆gt;更改配置数据 - >刷新），因此另一种解决方案是强制使用＆＃34;强制＆＃34;通过使用刷新事件的回调进行选择：

＆＃13;

$('#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');
});

＆＃13;

<!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>

＆＃13;

在jsTree中，如何在替换树后最初选择节点？

1 个答案:

替代刷新