Tabla con scroll, header y columnas fijas

*Recuerden  este es un ejemplo básico.

*No creen la rueda  q ya está creada  mejor  utilicen esa rueda para crear  cosas más grandes.

*Este es un tutorial explicando cómo  dejar los títulos de un grid o table  fijos al igual q algunas columnas

* vea el demo  y compruebe q es lo q está buscando

Clic aquí para ver Demo

1. llamar librerías js y  hojas de  estilos  q vamos a utilizar  entre el header  de la pagina.

Bueno  como  pueden ver llamo lo q' utilizare desde un inicio, en  mi caso la librería de jquery la llamo  desde una ruta de google y no necesite descargarla obvio solo funciona si tengo Internet constante

2. Para este  caso   un requisito fundamental es que llenes una tabla de  html  con  datos   para q el ejemplo tenga el resultado esperado

3 . Poner un id  ala tabla  en mi caso es id="GridView1"

4. Colocar   en  las  filas  de los  titulos  la  clase como quieras q se vea   <tr class="GridviewScrollHeader">

5. Coloque el css  en los  demás  tr  como quiera q' se vean sus  datos <tr class="GridviewScrollItem">

recuerde  estas son clases que ud puede modificar  como quiera para q su table se vea  como ud quiera

6. Cree  al final de la página una  función jquery   de la siguiente manera

Bueno en la  primera línea de la function ponemos  con un numeral el id de la tabla esto con el fin de que las librerías  reconozcan  a que objeto le van hacer las  operaciones,    que en mi caso sería '#GridView1'   bueno  hay algunas propiedades :

width =  ancho ,

 height =alto,

freezersize= Cantidad de columnas que deseas fijas , es decir q no se mueva con el scroll horizontalmente  esto las cuenta de izquierda a derecha ,

headerrowcount = Colocamos la cantidad de filas que deseamos q sean titulo en caso de que el titulo  contenga dos filas o tres  o las que sea no  abra problemas  lo solucionamos  solo  con colocar un número , a un que normalmente es 1 q es la primera  fila.

railsize= se refiere al ancho de la barra q contiene el scroll sea  horizontal o vertical,

barsize= se refiere al ancho de la barra del scroll como tal ,

 varrowtopimg  , varrowbottomimg ,  harrowleftimg,  harrowrightimg=  Estas cuatro propiedades como lo ven en la imagen de arriba  son para poner las imágenes de la flechas  del scroll   aquí puedes llamar otras  imágenes  según como lo quieras

En la imagen anterior  les muestro  las columnas  oscuras   son las  fijas  como  el header  en el demo las muestro del mismo color todas  las columnas,   a un obviamente  uds  se las  arreglan para cambiar el  estilo  a su parecer.

 Bueno esto es otra funcionalidad y es  cuando el usuario pase  el mouse por alguna de las filas  esta cambie de color y q quede seleccionada cuando se da clic encima de ella bueno para esto  colocaremos lo siguiente

Cree  esta página js para lo del evento   no se  convierta en mucho código js en la interfaz bueno entre esta  pagina  la primera  línea de código  te  pide   es la  siguiente  var gridviewID = "GridView1";  lo único q tienen que hacer reemplazar   "GridView1" por el id de tu tabla o grid , o  crear una función donde  le enviemos el id de la table en caso que utilicemos  esto muchas veces.

Solo para evitar confusiones coloque la parte azul para q sepan cual tienen q cambiar por el id de su table .

Bueno  y en la tabla  será algo muy sencillo para q funcione   llamamos los eventos  de  esta manera  en los   tr

Bueno como seguramente   esta tabla la llenan  con un siglo   estos  números q están  allí  hacemos q incrementen hasta q de la última fila   ejemplo  RowMouseOver(2) y así  en todos los eventos

Clic aquí para ver Demo

Clic aquí para descargar demo

NOTA: Esto fue algo que encontré en google y lo quise compartir ya q es algo q a cada rato me piden y esta es una forma rápida de solucionarlo  espero que les guste y sobre todo  le sirva. En lo personal me ha servido demasiado.