JsTree: Показать больше опций

Есть ли способ show more опций/ссылок в jsTree? Я хочу показать только часть детей и иметь ссылку, чтобы развернуть, чтобы показать все элементы. Я попробовал несколько поисков Google, но не смог найти решение. Любая помощь/подсказка будет полезна.

Предположим, что parent-1 имеет 10 дочерних узлов, а Main Root имеет 5 родительских узлов.

Main Parent
    - Parent - 1
        - child-1
        - child-2
        - child-3
        show 7 more parent-1 elements //LINK
    - Parent - 2
        - child-1
        - child-2
    - Parent - 3
        - child-1
        - child-2
    show 2 more Main Parent elements //LINK

Я пытаюсь добиться следующего результата

enter image description here

Это возможно? Есть ли доступные плагины для этого? Есть ли альтернативы для jsTree которые поддерживают это?

ОТВЕТЫ

Ответ 1

Вы можете реально использовать классы /childElement count для работы этого. В зависимости от того, что вы хотите показать, вы можете использовать идентификаторы/классы, чтобы оставить элементы, которые вы хотите, чтобы они оставались видимыми, или при желании показать/скрыть. Тот же принцип может быть применен как к дочерним элементам (скажем, элементам списка в списке), так и к вышестоящим родительским элементам, поэтому, если у вас есть первая функция, ее можно легко адаптировать.

Я включил здесь список примеров, чтобы дать вам идею (это в простом javascript, и вы можете немного его подправить...) Jquery сделает JS короче, но всегда полезно знать, что такое ваниль, на мой взгляд...

var x = document.getElementById("show");
//var root = document.getElementsByTagName('body')[0];
var count = x.childElementCount;
var btn1 = document.getElementById("ulmore");
btn1.innerHTML = "+ Show all " + count + " li children";
document.getElementById("ulmore").addEventListener("click", showmore);

function showmore() {
  //var d = document.getElementsByClassName("tg1").length;
  //use d if you want to show "show d more children" instead of the full amount of children
  var el = document.getElementsByTagName("li");

  var i;
  for (i = 0; i < el.length; i++) {
    if (el[i].classList.contains("tg1")) {
      //el[i].style.display = "block"; works
      el[i].classList.toggle('more');
      if (el[i].classList.contains("more")) {
        btn1.innerText = "Hide children";
      } else {
        btn1.innerText = "+ Show all " + count + " li children";
      }
    }
  }
}
body {
  padding: 1em;
  font-size: 10pt;
}

ul {
  list-style: none;
  width: 10em;
  padding: 0px;
}

li {
  text-align: left;
  line-height: 1.5;
  background: lightblue;
  border: 1px solid #444;
  margin: 1px 0px;
  padding: 2px;
}

span {
  display: inline-block;
}

div {
  display: inline-block;
  width: 100%;
  float: left;
  margin: 1em 2em 1em 0em;
}

.tg1 {
  background: lightsteelblue;
  display: none;
}

.more {
  background: lightsteelblue;
  display: block;
}

/*.tog2 {
  display: none;
}

.grow {
  background: yellow;
  display: inline-block;
}*/
<body>
  <div id="ulbit">
    <h4>Demo List</h4>
    <ul id="show">
      <li>One</li>
      <li>Two</li>
      <li class="tg1">Three</li>
      <li class="tg1">Four</li>
      <li class="tg1">Five</li>
      <li class="tg1">Six</li>
      <li class="tg1">Seven</li>
      <li class="tg1">Eight</li>
    </ul>
    <span id="ulmore"></span>
  </div>

<!--  <div class="tog2">
    Div 2 hello
  </div>
  <div class="tog2">
    Div 3
  </div>
  <span id="divmore"></span>-->
</body>

Ответ 2

Вы пытались использовать событие before_open.jstree, чтобы показать дерево так, как вам нужно? см. пример (я использую часть демонстрационной страницы с сайта jstree):

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jstree basic demos</title>
	<style>
	html { margin:0; padding:0; font-size:62.5%; }
	body { max-width:800px; min-width:300px; margin:0 auto; padding:20px 10px; font-size:14px; font-size:1.4em; }
	h1 { font-size:1.8em; }
	.demo { overflow:auto; border:1px solid silver; min-height:100px; }
	</style>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
</head>
<body>
	<h1>Interaction and events demo</h1>
	<button id="evts_button">select node with id 1</button> <em>either click the button or a node in the tree</em>
	<div id="evts" class="demo"></div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
	
	<script>
	
	// interaction and events
	$('#evts_button').on("click", function () {
		var instance = $('#evts').jstree(true);
		instance.deselect_all();
		instance.select_node('1');
	});
	$('#evts')
		.on("changed.jstree", function (e, data) {
			if(data.selected.length) {
				alert('The selected node is: ' + data.instance.get_node(data.selected[0]).text);
			}
		})
		.on("before_open.jstree", function (e, data,a,b,c,d) {
			$('#' + data.node.id + ' ul li:nth-child(n + 2)').hide();
			var str = '<li class="jstree-node  jstree-leaf jstree-last" role="treeitem">press to show ' + $('#' + data.node.id + ' ul li:nth-child(n + 2)').length + ' more items</li>';
			var li = $(str).on('click', function(a,b,c,d) {$(a.target).parent().find('li').show(); $(a.target).hide()});
			$('#' + data.node.id + ' ul').append(li);
		})
		.jstree({
			'core' : {
				'multiple' : false,
				'data' : [
					{ "text" : "Root node", "children" : [
							{ "text" : "Child node 1", "id" : 1 },
							{ "text" : "Child node 2" }
					]}
				]
			}
		});
	</script>
</body>
</html>

Ответ 3

$(function() {
  // 6 create an instance when the DOM is ready
  $("#jstree").jstree({
    core: {
      check_callback: true
    },
    checkbox: {
      cascade: "up",
      three_state: true
    },
    plugins: ["dnd", "contextmenu", "checkbox"]
  });

  // 7 bind to events triggered on the tree
  $("#jstree").on("changed.jstree", function(e, data) {
    console.log(data.selected);
  });
  // 8 interact with the tree - either way is OK
  $("button").on("click", function() {
    $("#jstree")
      .jstree(true)
      .select_node("child_node_1");
    $("#jstree").jstree("select_node", "child_node_1");
    $.jstree.reference("#jstree").select_node("child_node_1");
  });
});
<link href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'; return false;" rel="stylesheet"/>
<link href="#" onclick="location.href='https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css'; return false;" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="jstree">
  <ul>
    <li class="top-menu-invisible ">
      <a href="#"><i></i> <span class="menu-item-parent">Main Parent</span><b class="collapse-sign"><em class="fa fa-plus-square-o"></em></b></a>
      <ul>
        <li class="top-menu-invisible ">
          <a href="#"><i></i> <span class="menu-item-parent">Parent - 1</span><b class="collapse-sign"><em class="fa fa-plus-square-o"></em></b></a>
          <ul>
            <li>
              <a title="Amend" href="/"><i></i> <span class="menu-item-parent">child-1</span></a>
            </li>
            <li>
              <a title="Refresh" href="/"><i></i> <span class="menu-item-parent">child-2</span></a>
            </li>
            <li>
              <a title="Refresh Translations" href="/"><i></i> <span class="menu-item-parent">child-3</span></a>
            </li>
          </ul>
        </li>

      </ul>
    </li>
    <li>
      <a title="Product" href="/"><i class="fa fa-lg  fa-fw fa-gift"></i> <span class="menu-item-parent">Parent - 2</span></a>
    </li>

    <li>
      <a href="#"><i class="fa fa-lg fa-fw fa-bar-chart-o"></i> <span class="menu-item-parent">Parent - 3</span><b class="collapse-sign"><em class="fa fa-plus-square-o"></em></b></a>
      <ul>
        <li>
          <a href="/graphs/flot">child-1</a>
        </li>
        <li>
          <a href="/graphs/highcharts">child-1<span class="badge pull-right inbox-badge bg-color-yellow">new</span></a>
        </li>
      </ul>
    </li>
  
  </ul>
</div>