Mariano Ravinale's Blog

Sharing Experiences

Archive for the ‘Jquery’ Category

Un poco de JsTree

with one comment

Quizas esta sea la primera de una serie de post sobre mi experiencia con JsTree, ya veremos.

En un momento me toco armar un control que utilizara un dual list, pero con una variante el cada list tendria la estructura de arbol!, para eso tomé el maravilloso jsTree.
y empecé a armar un custom server control en asp.net utilizando este componente como estandarte.

Si bien este control tiene la posibilidad de drag and drop, se preguntarán por que hacer botones para pasar
los nodos de un lado a otro, pues la respuesta es simple, la gente esta acostumbrada a los botones.

Imagen del control:

Veamos un poco de los botones.

$(function() {
//nos suscribimos al evento click del boton
 $('#btnToRight').click(function() {
                //cortamos el elemento seleccionado del arbol de partida
                $.tree.reference("#divJsTree1").cut();
                //obtenemos el nodo padre de la ultima hoja del arbol de destino
                var last = $('#divJsTree2Root li:last-child .last').parent().parent();
                //lo seleccionamos
                var selected = $.tree.reference("#divJsTree2")
                                      .select_branch('#divJsTree2Root ' + '#' + $(last).attr('id'));
                //y pegamos el nodo de partida debajo del de destino.
                $.tree.reference("#divJsTree2").paste(selected, "after");
});

//hacemos lo mismo pero de manera contraria para el boton con direccion opuesta.
$('#btnToLeft').click(function() {
                $.tree.reference("#divJsTree2").cut();
                var last = $('#divJsTree1Root li:last-child .last').parent().parent();

                var selected = $.tree.reference("#divJsTree1")
                                      .select_branch('#divJsTree1Root ' + '#' + $(last).attr('id'));

                $.tree.reference("#divJsTree1").paste(selected, "after");
});
});

Como el Jstree esta construido en su totalidad con Json.
Podriamos pensar que quizas serializando y deserealizando estos objetos podriamos reconstruirlo en el servidor creando su representacion como clases en C# utilizando JavaScriptSerializer.

mmm interesante, pero como obtengo la representacion Json del arbolito? y donde lo guardo para que el servidor lo pueda reconstruir?

quizas con este codigo se aclaren las dudas:

//creamos una funcion donde le enviamos como parametro el Id de nuestro arbolito y de nuestro hidden
function saveJsTree(treeName, hiddenName) {
           //el Id del arbolito es para obtener la referencia y utilizamos su funcion .get("json") para que nos devuelva su representacion Json.
           //$.toJson lo transformara a string para gurdarlo en el hidden. 
           var jsonTree = $.toJSON($.tree.reference("#" + treeName).get("json"));
            $("#" + hiddenName).val(jsonTree);
        }

Bueno con esto ya tenemos las bases para ir construyendo nuestro control de servidor.
Happy Coding.

Written by @mravinale

marzo 2, 2010 at 2:03 am

Publicado en Jquery