Skip to content

Instantly share code, notes, and snippets.

@joaoneto

joaoneto/SiblingsTreeTable.js

Created May 15, 2012 00:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save joaoneto/2698300 to your computer and use it in GitHub Desktop.
Save joaoneto/2698300 to your computer and use it in GitHub Desktop.
Download ZIP
Tree in the table, with hierarchical siblings nodes. As if the siblings they were the children nodes
Raw
SiblingsTreeTable.js
/*
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<style type="text/css">
table { width: 100% }
table tr.produto-servico,
table tr.produto-servico-detalhe { display: none }
</style>
</head>
<body>
<table class="produtos-servicos">
<thead>
<tr>
<th>Produto / Serviço</th>
<th>Valor</th>
<th>Validade</th>
</tr>
</thead>
<tbody>
<tr id="produto-1" class="expand root">
<td colspan="3">Produto 1</td>
</tr>
<tr id="servico-1" class="expand produto-servico produto-1 child-produto-1">
<td>Produto 1 - Servico 1</td>
<td></td>
<td>6</td>
</tr>
<tr class="expand child produto-servico-detalhe produto-1 child-servico-1">
<td>CADASTRO 1</td>
<td>R$ 100,00</td>
<td>6</td>
</tr>
<tr class="expand child produto-servico-detalhe produto-1 child-servico-1">
<td>CADASTRO 2</td>
<td>R$ 100,00</td>
<td>6</td>
</tr>
<tr id="servico-2" class="expand produto-servico produto-1 child-produto-1">
<td>Produto 1 - Servico 1</td>
<td></td>
<td>6</td>
</tr>
<tr class="expand child produto-servico-detalhe produto-1 child-servico-2">
<td>CADASTRO 1</td>
<td>R$ 100,00</td>
<td>6</td>
</tr>
<tr class="expand child produto-servico-detalhe produto-1 child-servico-2">
<td>CADASTRO 2</td>
<td>R$ 100,00</td>
<td>6</td>
</tr>
<tr id="produto-2" class="expand root">
<td colspan="3">Produto 2</td>
</tr>
<tr id="servico-3" class="expand produto-servico produto-2 child-produto-2">
<td>Produto 2 - Servico 1</td>
<td></td>
<td>10</td>
</tr>
<tr class="expand produto-servico-detalhe produto-2 child-servico-3">
<td>CADASTRO 1</td>
<td>R$ 100,00</td>
<td>6</td>
</tr>
<tr class="expand produto-servico-detalhe produto-2 child-servico-3">
<td>CADASTRO 2</td>
<td>R$ 100,00</td>
<td>6</td>
</tr>
<tr class="produto-servico produto-2">
<td>Produto 3 - Servico único</td>
<td>R$ 100,00</td>
<td>1</td>
</tr>
</tbody>
</table>
*/
$(document).ready(function() {
$('.expand').click(function() {
var root_selector = ['#', $(this).prop('id')].join('');
var root_siblings = ['.', $(this).prop('id')].join('');
var childrens_selector = ['.', 'child-', $(this).prop('id')].join('');
// toggle expanded
$(root_selector).data('expanded', !$(root_selector).data('expanded'));
//set expanded
var expanded = $(root_selector).data('expanded');
// check if tr is the root node
var is_root = $(root_selector).hasClass('root');
if (expanded) {
if (is_root) {
var queue = [];
$(root_siblings).each(function() {
if ($(this).data('expanded')) {
queue.push(['.', 'child-', $(this).prop('id')].join(''));
}
});
$(queue.join(',')).show();
}
$(childrens_selector).show();
} else {
if (is_root) {
$(root_siblings).hide();
} else {
$(childrens_selector).hide();
}
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment