Fijar cabecera de tablas

Fijar la primera fila de una tabla es un requerimiento normal cuando trabajamos con una lista extensa de datos y no queremos que se pierdan los nombres de la columnas, ahora vamos a revisar como con ayuda de estilos y jQuery conseguir el efecto que hemos comentado.

La idea general es poner la tabla dentro de un <div> y por medio de CSS especificar que use scroll ajustando las dimensiones del contenedor y haciendo que las cabecera de la tabla se quede fija dentro del <div>

Definir la propiedad overflow para el div, la propiedad overflow indica que debe hacer el explorador cuando el contenido (en nuestro caso la tabla) sale del área del contenedor (en nuestro caso el <div>). Los valores que puede tomar la propiedad son

visible El contenido no es recortado, puede sobresalir del contenedor

hidden El contenido es recortado, sin barras de scroll para poder ver el resto del contenido

scroll El contenido es recortado, pero el navegador coloca barras de scroll

auto Sólo si el contenido es recortado, el navegador coloca barras de scroll

A continuación tendemos el código con ayuda de CSS y jQuery que nos va a permitir fijar la primera fila de tabla en la mayor parte de los exploradores, entre ellos IE 7, IE 8, FireFox y Google Chrome.



Llenar TreeView de forma recursiva

Luego de mucho pensar he podido escribir una función que permite llenar un TreeView de forma recursiva, nos vamos a ayudar de listas genéricas y de una clase para poder pasar en cada llamada los datos que van a ir en los nodos.

Primero vamos a definir la clase que va a contener los datos de los nodos del árbol, vamos a crear las siguientes propiedades: código del nodo, código del padre, descripción o texto que se va a mostrar en el nodo, y URL en caso de que al dar clic sobre el nodo se direccione a alguna página, la definición sería:
  • Private Class TreeMenu
  • Public Codigo As Integer
  • Public Padre As Integer
  • Public Desc As String
  • Public URL As String
  • End Class
Como los datos se encuentran almacenados en una tabla de base de datos (se utiliza la estructura del post Menú dinámico desde base de datos con Sql Server y ASP.Net - Parte I ) vamos crear una lista genérica del tipo TreeMenu para pasar los datos que se encuentran en el datatable y crear la estructura de datos que nos va permitir llenar el árbol.

  • Dim lstMenuItem As New Collections.Generic.List(Of TreeMenu)
  • For Each r As Data.DataRow In dt.Rows
  • Dim Item As New TreeMenu
  • Item.Codigo = r("CODIGO")
  • Item.Padre = r("CODIGOPADRE")
  • Item.Desc = r("DESCRIPCION")
  • Item.URl = r("URL")
  • lstMenuItem.Add(Item)
  • Next

Para que funcione la recursividad necesitamos insertar el nodo raíz del árbol ya que la función utiliza TreeNodeCollection para poder añadir los nodos al árbol

  • TreeView1.Nodes.Add(New TreeNode("Root"))
  • LlenarTreeView(20000, lstMenuItem, TreeView1.Nodes) ' 2000 es el código del padre de donde se inicia el árbol
Y la función recursiva es:

  • Private Sub LlenarTreeView(ByVal CodPadre As Integer , ByRef NodoItems As Collections.Generic.List(Of TreeMenu) , ByRef Nodos As TreeNodeCollection)
  • For Each tm As TreeMenu In NodoItems
  • If CodPadre = tm.Padre Then
  • Nodos(Nodos.Count - 1).ChildNodes.Add(New TreeNode(tm.Desc, tm.Codigo, "", tm.URL, ""))
  • LlenarTreeView(tm.Codigo, NodoItems, Nodos(Nodos.Count - 1).ChildNodes)
  • End If
  • Next
  • End Sub

Enlaces relacionados
Recorrer TreeView en forma recursiva
Menú dinámico desde base de datos con Sql Server y ASP.Net - Parte I

Plugin : Fijar cabecera de una tabla

Plugin : Fijar cabecera de una tabla

En un post anterior había publicado como podemos fijar la primera fila de una tabla con la ayuda de jQuery y hojas de estilos, para mis aplicaciones esta actividad se volvió algo común así que preferí hacer mi primer plugin jQuery para hacer transparente y mas fácil el fijar la primera fila de mis tablas.
La función se llama TableScroll porque realmente eso es lo que hacemos con el código, colocar la tabla dentro de un contenedor y mostrar el scroll para poder recorrer las filas de la tabla.
La función actual directamente sobre una tabla y básicamente lo que se hace es:
1. Recuperar la referencia a la primera fila var trCab = this.find('tr:first');
2. Aplicamos el estilo a la primera fila para que se quede fija dentro del contenedor
3. Con ayuda de jQuery incluimos la tabla dentro de un div que se va a llamar tbScrollContainer
4. Fijamos el contenedor a las dimensiones de ancho y alto que recibe la función y mostramos el scroll
Si nos fijamos con atención no es complicado el proceso a seguir y mucho menos escribir la función usando jQuery
Luego la llamada desde nuestra página ASPX sería:
$(document).ready(function(){ $('#NombreTabla').tableScroll('100%',500); })
Y el código del plugin jQuery, este es uno de los códigos jQuery que me ha tomado más tiempo hacer y ha sido el de mayor utilidad en mis aplicaciones
También pueden revisar

Menú dinámico desde base de datos con Sql Server y ASP.Net - Parte I

Menú dinámico desde base de datos con Sql Server y ASP.Net

Vamos a ver mi solución al momento de crear un menú dinámico con datos que se encuentran almacenados en una base de datos, para nuestro caso Sql Server.
Primero vamos a ver la parte de datos que se va a centrar en una tabla para almacenar las opciones del menú, el diseño está orientado a tener tres niveles el primero de aplicación, el segundo de menú y el tercero de comando, es decir vamos a tener una estructura que va a permitir almacenar opciones para varias aplicaciones (que es mi caso, necesito tener centralizada la seguridad de tres aplicaciones y asignar opciones dentro de las tres para un usuario.)
Mi solución es una variante simplificada del siguiente proyecto http://www.codeproject.com/KB/database/tree_olap.aspx, digo simplificada porque este ejemplo sirve para arboles de cualquier nivel, utiliza triggers para implementarlo y es súper eficiente al momento de recuperar estructuras jerárquicas, mi simplificación viene por el lado de el número de niveles del árbol es fijo, solamente tres, no se utilizan triggers porque voy a fijar las identificaciones de los nodos dentro de intervalos fijos, pero el concepto si se implementa para la recuperación de los arboles.
La estructura de la tabla seria la siguiente:

FindAll:Collections.Generic.List(Of) en VB.Net

FindAll:Collections.Generic.List(Of) en VB.Net

En esta publicación vamos a ver como implementar el método FindAll de las listas genéricas en VB.Net.

Pimero tenemos la declaración de la lista y de la clase que van a ser los elmentos de la lista

Private Class TreeMenu

Public Codigo As Integer

Public Padre As Integer

Public Valor As String

End Class

Dim Lista As New Collections.Generic.List(Of TreeMenu)

Vamos a buscar los elementos que cumple un criterio

Dim newLista = Lista.FindAll(AddressOf FindNodo)

El método FindAll hace referencia a la función FindNodo que se encarga de aplicar el filtro y regresar los elementos que cumplen la condición, en nuestro ejemplo los elementos se van a almacenar en la lista newLista

La función es,

Private Function FindNodo(ByVal Nodo As TreeMenu) As Boolean

Return Nodo.Codigo = 100

End Function

Y va a indicar que elemento del tipo TreeMenu dentro de la lista tienen código igual a 100