Question

我正在尝试将树视图扩展到选定的节点级别。但是我对此没有任何想法，请任何人帮助我。

例如，我们在“类别列表”中单击“父级d”，然后将“树视图列表”扩展到“父级”级别以获取更多详细信息，请检查 Here

HTML

<h3>
Category list
</h3>

点击任何li展开树列表直至所选级别

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

树状视图列表

<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)
});

DEMO

Answer 1

我不是javascript开发人员，但是，尝试解决您的问题，这是工作demo

var $ul = $('ul');
$(document).ready(function() {
  $ul.find('li[parent-id]').each(function() {
    $ul.find('li[parent-id=' + $(this).attr('li-id') + ']').wrapAll('<ul />').parent().appendTo(this) 
// not changed its your code still, but I need this only first time, so moved into document ready
  });
});
$('ul#category li').click(function() {
  $("#ulCollapse1").html(''); // I have created a new div section
  $("ul").removeAttr('class'); // remove active classes 
  var nodeId = $(this).attr('id');
  arrangeNodes(nodeId); 
  $("#ulCollapse1").html($(".active").parent().clone()); //get the marked elements first parent (which is 'li')
  $("#ulCollapse").hide(); // hide the main treeview
});

function arrangeNodes(item) {
  $ul.find('li[parent-id=' + item + ']').parent().closest("ul").addClass("active"); // find item and mark the first ul as active (selected)
}

希望有所帮助，

Answer 2

我不完全明白你想要实现的目标。

但也许：lt（）是您正在寻找的

<强> 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 ==＆gt; https://jsfiddle.net/x45j4fx6/1/

jQuery - 将树视图展开到选定的节点级别

2 个答案: