Vou agora demonstrar uma treeview do Yahoo User Library em funcionamento. Fiz uma página de teste, que contém uma estrutura simples em árvore.

Todo o código necessário pra fazer o treeview funcionar pode ser visto abrindo o código fonte da página no seu navegador, mas o trecho importante é este:

<script type=”text/javascript”>
//<![CDATA[
function mytree_Init() {
var tree = new YAHOO.widget.TreeView("mytree");
var parent_top = new YAHOO.widget.TextNode({ label: "Grupo Empresarial XYZ", href:"#" }, tree.getRoot(), false);
var empresa1 = new YAHOO.widget.TextNode({ label: "Empresa 1", href:"#" }, parent_top, false);

var filialA = new YAHOO.widget.TextNode({ label: "Filial A", href:"#" }, empresa1, false);
new YAHOO.widget.TextNode({ label: "Gerente Geral", href:"#" }, filialA, false);
new YAHOO.widget.TextNode({ label: "Gerente de Operações", href:"#" }, filialA, false);

var filialB = new YAHOO.widget.TextNode({ label: "Filial B", href:"#" }, empresa1, false);
new YAHOO.widget.TextNode({ label: "Gerente Geral", href:"#" }, filialB, false);

var empresa2 = new YAHOO.widget.TextNode({ label: "Empresa 2", href:"#" }, parent_top, false);

tree.draw();
}
YAHOO.util.Event.addListener(window, "load", mytree_Init);
//]]>
</script>

Apesar de um pouco feio, é um código simples que monta a estrutura da lista em árvore. Podemos tornar este código mais bonito? Sim! Usando as facilidades permitidas pelo Ruby on Rails, a mesma lista pode ser montada desta forma:

var test_data =
[0, { label: "Grupo Empresarial XYZ"},
1, { label: "Empresa 1"},
2, { label: "Filial A"},
3, { label: "Gerente Geral"},
3, { label: "Gerente de Operações"},
2, { label: "Filial B"},
3, { label: "Gerente Geral"},
1, { label: "Empresa 2"}];

Muito melhor, não é mesmo? Esta formação é possível quando criamos um método que vai pegar a estrutura acima e escrever o código javascript correspondente. Estas intruções de como criar este método no rails podem ser lidas neste blog.

No related posts.