JsTree:显示更多选项
JsTree: Show more options
有什么方法可以在 jsTree
中添加 show more
option/link 吗?
我只想显示部分子项,并有一个 link 展开以显示所有元素。
我尝试了几次 google 搜索,但找不到解决方案。任何 help/hint 都会有用。
假设 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
我正在尝试实现以下结果
这可能吗?有没有可用的插件? jsTree
是否有支持此功能的替代方案?
您可以使用 classes/childElement 计数来解决这个问题。根据您要显示的内容,您可以使用 ids/classes 使您希望保持可见的元素保持可见,或者选择 show/hide。同样的原则可以应用于子元素(比如列表中的列表项)和更高的父元素,所以一旦你有了第一个函数,就可以很容易地对其进行调整。
我在这里包含了一个列表示例来给你这个想法(它很简单 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>
这是代码中的 fiddle link (with body 'parent' elements) included。
(注意:即使 <br>
标签 [当在 div 之间使用时] 也会被视为 top-level 元素。我认为如果你想按 tagName(或 className)计数将是最有用的计算不同类型的 'parent' 元素(而不是计算 body 的子元素)。fiddle)
中包含了两者的示例(body 和 getElementsByTagName 的子元素)
希望对您有所帮助
您是否尝试过使用 "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>
希望对您有所帮助。
有什么方法可以在 jsTree
中添加 show more
option/link 吗?
我只想显示部分子项,并有一个 link 展开以显示所有元素。
我尝试了几次 google 搜索,但找不到解决方案。任何 help/hint 都会有用。
假设 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
我正在尝试实现以下结果
这可能吗?有没有可用的插件? jsTree
是否有支持此功能的替代方案?
您可以使用 classes/childElement 计数来解决这个问题。根据您要显示的内容,您可以使用 ids/classes 使您希望保持可见的元素保持可见,或者选择 show/hide。同样的原则可以应用于子元素(比如列表中的列表项)和更高的父元素,所以一旦你有了第一个函数,就可以很容易地对其进行调整。
我在这里包含了一个列表示例来给你这个想法(它很简单 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>
这是代码中的 fiddle link (with body 'parent' elements) included。
(注意:即使 <br>
标签 [当在 div 之间使用时] 也会被视为 top-level 元素。我认为如果你想按 tagName(或 className)计数将是最有用的计算不同类型的 'parent' 元素(而不是计算 body 的子元素)。fiddle)
希望对您有所帮助
您是否尝试过使用 "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>
希望对您有所帮助。