Question

我正在使用jstree（版本3.0.0）。我已经用json生成了树。这棵树深一层。看起来像

父母1
- Child1
- Child2
父母2
- Child3
- Child4

如果我单击每个孩子，则会显示相应的信息。

问题：我没有内容要显示给父母。因此，如果我单击parent，则应自动选择其第一个孩子。有什么办法吗？

例如：如果单击Parent1，则应显示Child1的内容，对于Parent2，应显示Child3的内容。

我尝试使用click事件以及添加和删除类来执行此操作，但未获得期望的结果。请参阅下面的代码：

    <div id="mytree"></div>
    <p class="hidden pele" id="dog">I'm Dog</p>
    <p class="hidden pele" id="lion">I'm Lion</p>
    <p class="hidden pele" id="mobile">I'm Mobile</p>
    <p class="hidden pele" id="lappy">I'm Lappy</p>

var arrayCollection = [
{"id": "animal", "parent": "#", "text": "Animals", "state": {"selected": true}},
{"id": "device", "parent": "#", "text": "Devices"},
{"id": "dog", "parent": "animal", "text": "Dogs"},
{"id": "lion", "parent": "animal", "text": "Lions"},
{"id": "mobile", "parent": "device", "text": "Mobile Phones"},
{"id": "lappy", "parent": "device", "text": "Laptops"},
]; 
var all_p = $('.pele');
$('#mytree').jstree({
    'core': {
        'data': arrayCollection
     }
}).on(
      "select_node.jstree", function(evt, data){
          all_p.each(function(){
              if(this.id === data.node.id){
                  $(this).removeClass('hidden');
              }else{
                  if(!$(this).hasClass('hidden')){
                       $(this).addClass('hidden');
                  }
              }
           })
 });

$("#mytree >ul >li >a").on('click', function(){
      $(this).prev('i').trigger('click');
      $(this).next('ul.jstree-children li a').toggleClass('jstree-clicked'); 
});

小提琴链接：https://jsfiddle.net/khz65nv0/3/

例如：如果单击Parent1，则应显示Child1的内容，对于Parent2，应显示Child3的内容。

Answer 1

您可以检查所选节点是否为根节点，然后获取其第一个子ID

"select_node.jstree", function(evt, data){
    let nodeid = data.node.id;

    if(data.node.parent === "#" && data.node.children_d.length > 0){
      nodeid = data.node.children_d[0]
    }
    all_p.each(function(){
        if(this.id === nodeid){
            $(this).removeClass('hidden');
        }else{
            if(!$(this).hasClass('hidden')){
                $(this).addClass('hidden');
            }
        }
    })
}

Answer 2

使用changed.jstree事件。选择更改时会触发此事件，因此只需检查新选择的aria-level是否为1即可，这意味着父节点已被选中，然后只需触发另一次单击即可选择子节点。

var arrayCollection = [
{"id": "animal", "parent": "#", "text": "Animals", "state": {"selected": true}},
{"id": "device", "parent": "#", "text": "Devices"},
{"id": "dog", "parent": "animal", "text": "Dogs"},
{"id": "lion", "parent": "animal", "text": "Lions"},
{"id": "mobile", "parent": "device", "text": "Mobile Phones"},
{"id": "lappy", "parent": "device", "text": "Laptops"},
]; 
var all_p = $('.pele');
$('#mytree').jstree({
    'core': {
        'data': arrayCollection
     }
}).on(
      "select_node.jstree", function(evt, data){
          all_p.each(function(){
              if(this.id === data.node.id){
                  $(this).removeClass('hidden');
              }else{
                  if(!$(this).hasClass('hidden')){
                       $(this).addClass('hidden');
                  }
              }
           })
 });

$("#mytree >ul >li >a").on('click', function(){
      $(this).prev('i').trigger('click');
      $(this).next('ul.jstree-children li a').toggleClass('jstree-clicked'); 
});

$('#mytree').on("changed.jstree", function (e, data) {
    if ($(".jstree-clicked").parent().attr("aria-level") == 1) {
        $(".jstree-clicked").next(".jstree-children").find("a.jstree-anchor:first").click();
    }
});

.hidden {
  display: none;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="mytree"></div>
<p class="hidden pele" id="dog">I'm Dog</p>
<p class="hidden pele" id="lion">I'm Lion</p>
<p class="hidden pele" id="mobile">I'm Mobile</p>
<p class="hidden pele" id="lappy">I'm Lappy</p>

如何在单击父节点时打开子节点

2 个答案: