Para que una aplicación web tenga un interfaz de usuario fácil de utilizar y facilitemos su usabilidad no hay más remedio que pasar por un lenguaje script y por eso cada vez que tengo la oportunidad me gusta hacer alguna práctica con JavaScript y en este caso utilizando la librería JQuery que facilita nos facilita mucho esta tarea.
La excusa que utilizo hoy para hacer este ejemplo es una petición en los foros MSDN para hacer una búsqueda de texto en un TreeView y poder seleccionar posteriormente el nodo que coincida con esta selección.
Para esto voy a utilizar un plugin de Jquery que provee a los inputs la extensión de mostrar un autoComplete donde se mostraran los textos de los nodos que coincidan con el texto introducido en el input.
Para las referencias a las librerías Jquery utilizare CDN para aprovechar sus beneficios y no tener obligatoriamente las librerías en nuestro proyecto.
Empecemos!!!
Crearemos un proyecto web que contendrá una página aspx con un simple input html y un treeview que llenaremos con los mismos campos que piden en la consulta del foro.
Lo único que tenemos que tener en cuenta, es que necesitamos un identificador para el input y especificar un estilo al treeview que utilizaremos para localizar el control al cargar la página.
[sourcecode language=»xml»]
<input id="example" />
<asp:TreeView ID="TreeView1" runat="server" CssClass="TreeN">
<ParentNodeStyle CssClass="ItemNodeTree" />
[/sourcecode]
Una vez preparada la página crearemos un fichero .JS donde pondremos nuestro código javaScript para darle la funcionalidad al ejemplo.
[sourcecode language=»xml»]
<script src="JS/JScript.js" type="text/javascript"/>
[/sourcecode]
Primera parte del script:
1. Inicializar el autocomplet y cargar los datos del treeview.
[sourcecode language=»javascript»]
$(document).ready(function() {
var data = CargarDatos();
$("#example").autocomplete(data, {
//Texto a mostrar en el input
formatItem: function(item) {
return item.text;
}
}).result(function(event, item) {
//Identificador del Nodo
Seleccionar(item.id);
});
});
[/sourcecode]
Al cargar la página llamamos a la función CargarDatos() que recorrerá el treeView para retornar un array de objetos que contendrán el texto y el identificador de cada nodo. Cuando se lanza el evento al seleccionar el registro se llamará a la función Seleccionar pasando el identificador del nodo como parámetro.
2. CargarDatos utiliza la potencia de los selectores de JQuery para seleccionar los nodos y llenar el array con la información necesaria del nodo.
[sourcecode language=»javascript»]
function CargarDatos() {
var treeN = $(".TreeN");
var items = new Array();
if (treeN.length){
var nodo = $("#"+treeN[0].id + " td: a" );
for (var index = 0; index < nodo.length; index++) {
items[index] = { text: nodo[index].innerText, id: nodo
[index].id };
}
}
return items;
}
[/sourcecode]
3. Seleccionar selecciona el nodo del treeView y le asigna el estilo adecuado para resaltar el registro seleccionado.
[sourcecode language=»javascript»]
function Seleccionar(treeID) {
//Limpiamos los estilos seleccionados anteriormente
var es = $(‘.SelectedNodeTree’);
for (var index = 0; index < es.length; index++) {
es[index].className = "ItemNodeTree";
}
//Definimos el estilo seleccionado al item correcto
$("#" + treeID)[0].className = "SelectedNodeTree";
}
[/sourcecode]
Resultado final:
Como podéis comprobar con tres simples funciones javaScript hemos dotado a nuestra aplicación una potente funcionalidad en el lado del cliente que mejora la experiencia de usuario y enriquece nuestras aplicación web.