jQuery - 展开树视图到选定的节点级别 [英] jQuery - Expand Tree View up to selected node level
问题描述
我正在尝试将树形视图展开至选定的节点级别。但是我对此没有任何想法，请任何人都可以帮助我。
例如，我们在'类别列表'中点击'Parent d'，然后展开'树视图列表'至'父级'级别以查看更多详情 此处 HTML 点击任何li展开树形列表直到选定的级别 树视图列表 jQuery 你试图达到。 但也许：lt（）就是你要找的东西
< H3>
类别列表
< / h3>
< ul id ='category'>
< li li-id ='1'id ='1'>家长1< / li>
< li li-id ='2'id ='2'>家长2< / li>
< li li-id ='3'id ='3'>家长3< / li>
< li li-id ='4'id ='4'>家长4< / li>
< li li-id ='5'id ='5'>父c< / li>
< li li-id ='6'id ='6'>父d< / li>
< li li-id ='7'id ='7'>父母< / li>
< li li-id ='8'id ='8'>父b< / li>
< li li-id ='9'id ='9'>父母e< / li>
< li parent-id ='5'li-id ='10'>父母x< / li>
< / ul>
< H3>
节点视图
< / h3>
< div class ='tree'>
< ul id ='ulCollapse'>
< li parent-id ='0'li-id ='1'>父母1< / li>
< li parent-id ='1'li-id ='2'>父母2< / li>
< li parent-id ='1'li-id ='3'>父母3< / li>
< li parent-id ='1'li-id ='4'>父母4< / li>
< li parent-id ='3'li-id ='5'>父c< / li>
< li parent-id ='3'li-id ='6'>父母d< / li>
< li parent-id ='2'li-id ='7'>父母< / li>
< li parent-id ='4'li-id ='8'>父b< / li>
< li parent-id ='4'li-id ='9'>父母e< / li>
< li parent-id ='5'li-id ='10'>父母x< / li>
< / ul>
< / div>
// $（'＃ulCollapse li'）。hide（）;
$ b $（'ul li'）。click（function（）{
var nodeId = $（this）.attr（'li-id'）;
alert（nodeId ）;
}）
var $ ul = $（'ul'）;
$ b $ ul.find（'li [parent-id]'）。each（function（）{
$ ul.find（'li [parent-id ='+ $（this ）.attr（'li-id'）+']'）
.wrapAll（'< ul />'）
.parent（）
.appendTo（this）
}）;
HTML
< h3>
类别列表
< / h3>
< ul id ='category'>
< li li-id ='1'id ='1'>家长1< / li>
< li li-id ='2'id ='2'>家长2< / li>
< li li-id ='3'id ='3'>家长3< / li>
< li li-id ='4'id ='4'>家长4< / li>
< li li-id ='5'id ='5'>父c< / li>
< li li-id ='6'id ='6'>父d< / li>
< li li-id ='7'id ='7'>父母< / li>
< li li-id ='8'id ='8'>父b< / li>
< li li-id ='9'id ='9'>父母e< / li>
< li li-id = '10'id ='10'> Parent x< / li>
< / ul>
< br>
< br>
< h3>
节点视图
< / h3>
< div class ='tree'>
< ul id ='ulCollapse'>
< li parent-id ='1'>
< ul>
< li>家长1< / li>
< / ul>
< / li>
< li parent-id ='2'>
< ul>
< li>父母2< / li>
< li>家长3< / li>
< li>家长4< / li>
< / ul>
< / li>
< li parent-id ='3'>
< ul>
< li>父c< / li>
< li>父母d< / li>
< li>父母< / li>
< / ul>
< / li>
< li parent-id ='4'>
< ul>
< li>父母b< / li>
< li>父母e< / li>
< / ul>
< / li>
< li parent-id ='5'>
< ul>
< li>父母x< / li>
< / ul>
< / li>
< / ul>
< / div>
JS
$ cats = $（＃category）;
$ tree = $（＃ulCollapse）;
$ tree.children（）。hide（）;
$ b $ cats.on（click，li，function（）{
var nodeId = $（this）.attr（'li-id'）;
console.info（NODE ID：，nodeId）;
$ tree.children（）。hide（）;
var maxEq = $ tree.children（[parent-id ='+ nodeId （'）;}'）。index（）;
maxEq <0&&（maxEq = 0）;
maxEq ++; // LTE因为：lte（）不存在
）console.info（MAX EQ：，maxEq）;
$ tree.children（：lt（+ maxEq +））。show（）;
}）;
FIDDLE ==> https://jsfiddle.net/x45j4fx6/1/
I am trying to expand the tree view up to selected node level. But I am not getting any idea about this please can any one help me on this.
For example We clicked on 'Parent d' in 'Category list' then expand 'Tree View List' up to 'Parent d' level for more details check Here
HTML
<h3>
Category list
</h3>
When click on any li expand tree list up to selected level
<ul id='category'>
<li li-id='1' id='1'>Parent 1</li>
<li li-id='2' id='2'>Parent 2</li>
<li li-id='3' id='3'>Parent 3</li>
<li li-id='4' id='4'>Parent 4</li>
<li li-id='5' id='5'>Parent c</li>
<li li-id='6' id='6'>Parent d</li>
<li li-id='7' id='7'>Parent a</li>
<li li-id='8' id='8'>Parent b</li>
<li li-id='9' id='9'>Parent e</li>
<li parent-id='5' li-id='10'>Parent x</li>
</ul>
Tree View List
<h3>
Node View
</h3>
<div class='tree'>
<ul id='ulCollapse'>
<li parent-id='0' li-id='1'>Parent 1</li>
<li parent-id='1' li-id='2'>Parent 2</li>
<li parent-id='1' li-id='3'>Parent 3</li>
<li parent-id='1' li-id='4'>Parent 4</li>
<li parent-id='3' li-id='5'>Parent c</li>
<li parent-id='3' li-id='6'>Parent d</li>
<li parent-id='2' li-id='7'>Parent a</li>
<li parent-id='4' li-id='8'>Parent b</li>
<li parent-id='4' li-id='9'>Parent e</li>
<li parent-id='5' li-id='10'>Parent x</li>
</ul>
</div>
jQuery
//$('#ulCollapse li').hide();
$('ul li').click(function(){
var nodeId = $(this).attr('li-id');
alert(nodeId);
})
var $ul = $('ul');
$ul.find('li[parent-id]').each(function() {
$ul.find('li[parent-id=' + $(this).attr('li-id') + ']')
.wrapAll('<ul />')
.parent()
.appendTo(this)
});
I don't fully understand what you're trying to achieve.
But maybe :lt() is what you're looking for
HTML
<h3>
Category list
</h3>
<ul id='category'>
<li li-id='1' id='1'>Parent 1</li>
<li li-id='2' id='2'>Parent 2</li>
<li li-id='3' id='3'>Parent 3</li>
<li li-id='4' id='4'>Parent 4</li>
<li li-id='5' id='5'>Parent c</li>
<li li-id='6' id='6'>Parent d</li>
<li li-id='7' id='7'>Parent a</li>
<li li-id='8' id='8'>Parent b</li>
<li li-id='9' id='9'>Parent e</li>
<li li-id='10' id='10'>Parent x</li>
</ul>
<br>
<br>
<h3>
Node View
</h3>
<div class='tree'>
<ul id='ulCollapse'>
<li parent-id='1'>
<ul>
<li>Parent 1</li>
</ul>
</li>
<li parent-id='2'>
<ul>
<li>Parent 2</li>
<li>Parent 3</li>
<li>Parent 4</li>
</ul>
</li>
<li parent-id='3'>
<ul>
<li>Parent c</li>
<li>Parent d</li>
<li>Parent a</li>
</ul>
</li>
<li parent-id='4'>
<ul>
<li>Parent b</li>
<li>Parent e</li>
</ul>
</li>
<li parent-id='5'>
<ul>
<li>Parent x</li>
</ul>
</li>
</ul>
</div>
JS
$cats = $("#category");
$tree = $("#ulCollapse");
$tree.children().hide();
$cats.on("click", "li", function() {
var nodeId = $(this).attr('li-id');
console.info("NODE ID: ", nodeId);
$tree.children().hide();
var maxEq = $tree.children("[parent-id='" + nodeId + "']").index();
maxEq < 0 && (maxEq = 0);
maxEq++; //LTE since :lte() doesn't exist
console.info("MAX EQ: ", maxEq);
$tree.children(":lt(" + maxEq + ")").show();
});
FIDDLE ==> https://jsfiddle.net/x45j4fx6/1/
这篇关于jQuery - 展开树视图到选定的节点级别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
