Grid con javascript

Since I've developed web applications, I was looking for a usefull grid for JavaScript, but I never found anything, there are some nice Applets and Activex files, but you have to pay for them.

So, I decided to write my own JavaScript grid and I called it JSGrid.

IMPORTANT Note: If you decide to use this script. All comments may be removed to optimize the performance, but must keep the notesabout the author and credit of the authors of the modified scripts.

Remember to comment here if you use this script in a web page, so we all can see it in action.

Features:

-Sort in ascendant or decendent order by a column:
Inspired in the script of Eric Pascarello (http://www.pascarello.com/sortTable/)
-Cells editions supports textbox, checkbox and combobox:
Inspired in the script ofkaka vijes, i can do it, Magnus Gudmundsson, Martin Honnen, Sachin S, william baney and felix norambuena (www.faqts.com)
-Data cell edition optional by each column
-Resizable columns optional by each column
-Use of more than one grid per page
-Manage rows and columns by a key
-Get a specified cell object method:
its properties can be modified by the td tag styles
-Get number of columns orrow methods
-Show a specified column method
-Show a specified row method
-Set rows selection method
-Get selected rows method
-Delete a row method
-Add a row method
-Use any size on your grids
-Easy design change with css
-Easy implementation for new methods
-Easy iteraction with dynamic web page programing languages (PHP, ASP, JSP, CGI)
-It was tested in Firefox, IE and should works inSafari

To use it you only have to call the JSGrid.js file from your html file as in the example:

jsgrid.js

//JSGrid: Script created by Luis Eduardo Cañedo Ugalde:
// http://www.computrabajo.com.mx/cvs/eduardocanedo
// http://somesourcecode.blogspot.com/
// luis.eduardo.canedo@gmail.com

//JSGrid GETS THE GRID NAME "tblNom" (IT MUST BE THE SAME TO THE OBJECT NAME,
//SO IT CAN FINDIT'S VARIABLES) THE DATA FOR THE COLUMNS "aryCol", THE DATA
//FOR THE ROWS "aryDat", THE HEIGTH SIZE "hgtSze", THE SELECT MODE "rowSel"
//AND THE NAME OF THE VALIDATOR FUNCTION FOR VALUES CHANGES "funVal"
JSGrid = function(tblNom, aryCol, aryDat, hgtSze, rowSel, funVal)
{
//MAKE THE ARGUMENTS GLOBAL
this.arguments = JSGrid.arguments;
//CONTAINER FOR KIND OF COLUMNS
this.aryTyp = newArray();
//WICH COLUMNS CAN BE EDITED
this.aryEdt = new Array();
//CURRENT RESIZED COLUMN
this.colSze = null;

//RETURN SELECTED ROWS INTO AN ARRAY
this.getSelRows = function()
{
//SEARCH SELECTED ROWS
var arrSel = new Array();
var arrRows = document.getElementById(tblNom).getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for(i=1;i

 

 

 

//COLUMNS FOR THE FIRST SAMPLEGRID
var aryCol0 = new Array();
aryCol0[0]='str|150|Banco';
aryCol0[1]='str|100|Archivo';
aryCol0[2]='int|75|Tamaño';
aryCol0[3]='str|200|Usuario';
aryCol0[4]='str|250|Observaciones';

//DATA FOR THE FIRST SAMPLE GRID
var aryDat0 = new Array();
aryDat0[0]='Banco Uno|file 01|35|Pedro|registro de prueba con texto muy muy muy muy muy muy muy muy muy muy largo';
aryDat0[1]='Banco Uno|file02|135|Pablo|obsercaciones de prueba';
aryDat0[2]='Banco Dos|file 03|15|Carlos|';
aryDat0[3]='Banco Dos|file 04|5|Toño|esta es una prueba de observaciones';
aryDat0[4]='Banco Tres|file 05|23|Juan|';
aryDat0[5]='Banco Cuatro|file 06|325|Luis|campo de observaciones';
aryDat0[6]='Banco Cinco|file 07|14|Raul|mas observaciones para las pruebas';
aryDat0[7]='Banco Cinco|file 08|350|Miguel|';aryDat0[8]='Banco Uno|file 09|57|Martin|';
aryDat0[9]='Banco Dos|file 10|38|Lorenzo|ultimo registro de prueba';
aryDat0[10]='Banco Uno|file 01|35|Pedro|registro de prueba con texto';
aryDat0[11]='Banco Uno|file 02|135|Pablo|obsercaciones de prueba';
aryDat0[12]='Banco Dos|file 03|15|Carlos|';
aryDat0[13]='Banco Dos|file 04|5|Toño|esta es una prueba de observaciones';
aryDat0[14]='Banco Tres|file...