I am struggling to collapse the tree view and need assistance. Below is the code snippet I've added. My goal is to have each node in the tree view initially collapsed and then expand a particular node on user interaction.
For example, when I execute this code, it should display item1 and item5. Clicking on item1 should reveal item2 and item4, excluding item3. This illustrates the issue I'm facing.
$(function() {
$('#mytable').on('click', '.toggle', function () {
//Gets all <tr>'s of greater depth
//below element in the table
var findChildren = function (tr) {
var depth = tr.data('depth');
return tr.nextUntil($('tr').filter(function () {
return $(this).data('depth') <= depth;
}));
};
var el = $(this);
var tr = el.closest('tr'); //Get <tr> parent of toggle button
var children = findChildren(tr);
//Remove already collapsed nodes from children so that we don't
//make them visible.
//(Confused? Remove this code and close Item 2, close Item 1
//then open Item 1 again, then you will understand)
var subnodes = children.filter('.expand');
subnodes.each(function () {
var subnode = $(this);
var subnodeChildren = findChildren(subnode);
children = children.not(subnodeChildren);
});
//Change icon and hide/show children
if (tr.hasClass('collapse')) {
tr.removeClass('collapse').addClass('expand');
children.hide();
} else {
tr.removeClass('expand').addClass('collapse');
children.show();
}
return children;
});
});table td {
border: 1px solid #eee;
}
.level1 td:first-child {
padding-left: 15px;
}
.level2 td:first-child {
padding-left: 30px;
}
.collapse .toggle {
background: url("http://mleibman.github.com/SlickGrid/images/collapse.gif");
}
.expand .toggle {
background: url("http://mleibman.github.com/SlickGrid/images/expand.gif");
}
.toggle {
height: 9px;
width: 9px;
display: inline-block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="mytable">
<tr data-depth="0" class="collapse level0">
<td><span class="toggle collapse"></span>Item 1</td>
<td>123</td>
</tr>
<tr data-depth="1" class="collapse level1">
<td><span class="toggle"></span>Item 2</td>
<td>123</td>
</tr>
<tr data-depth="2" class="collapse level2">
<td>Item 3</td>
<td>123</td>
</tr>
<tr data-depth="1" class="collapse level1">
<td>Item 4</td>
<td>123</td>
</tr>
<tr data-depth="0" class="collapse collapsable level0">
<td><span class="toggle collapse"></span>Item 5</td>
<td>123</td>
</tr>
<tr data-depth="1" class="collapse collapsable level1">
<td>Item 6</td>
<td>123</td>
</tr>
</table>