Insertar, Editar & Eliminar

Fox Mulder · #1 (**permalink**) 01/06/2005, 08:55

Hola.

Quisiera algún componente para hacer un "grid" que permita insertar, editar y eliminar registros, pero manteniendo los datos en memoria y no en una base de datos.

He buscado, pero todo lo que encuentro va ligado a una base de datos.

¿Conocen algo parecido?

Gracias

caricatos · #2 (**permalink**) 01/06/2005, 12:32

Hola Fox Mulder:

¿Qué es un "grid"?

Saludos

JavierB · #3 (**permalink**) 01/06/2005, 12:42

Hola caricatos

Un grid es una rejilla de datos, lo que en HTML conocemos como <table> con sus filas, columnas...

Saludos,

caricatos · #4 (**permalink**) 01/06/2005, 12:55

Hola otra vez:

Gracias por la aclaración, Javi

Tal vez este viejo mensaje sirva de referencia: http://www.forosdelweb.com/f13/como-adiciono-filas-tabla-dinamicamente-152620/

Saludos

Fox Mulder · #5 (**permalink**) 02/06/2005, 11:22

Excelente caricatos

es como lo que quiero.

He estado trabajando sobre el código, pero ahora me encuentro con que no se como identificar en que no. de <tr> estoy.

La insercion es algo como:

Código:

tdControles.innerHTML = '<button onClick=elimina()>X</button>';
fila.appendChild(tdControles);

Pero ahora que tengo la lista de botones no se como saber donde está el que presiono. Agregar un contador al insertar no me ayuda, pues las inserciones son ordenadas (insertBefore() en lugar de appendChild()).

¿Algo al respecto?

caricatos · #6 (**permalink**) 02/06/2005, 13:17

Hola otra vez:

Bueno, ahora estoy dando respuestas rápidas, pero espero que la idea te sirva:...

Si lo que quieres es identificar algo puedes crear un identificador aleatorio y usarlo en la función, pero para el caso de elimina, puedes ponerle elimina(this), y en el cuerpo de la función poner algo como this.parentNode.removeChild(this)... Creo que puse algo así en las FAQs...

Saludos

Fox Mulder · #7 (**permalink**) 02/06/2005, 14:06

Por supuesto que me ha ayudado, muchas gracias!

Aqui está el código logrado (la funcion isAnsiDate() no es totalmente mía, asi que prefiero obviarla)

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Simulacion - Coberturas</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script>

function isAnsiDate(sFecha){

    return true;

}

function agregarCosa(){

    var fechaInicio, tamano

    do{

        fechaInicio = prompt("Fecha de Inicio: (aaaa-mm-dd)", "");

    }while(!isAnsiDate(fechaInicio) && fechaInicio!=null);

    if(fechaInicio != null){

        do{

            tamano = prompt("Tamaño del Lote:", "");

        }while(isNaN(parseInt(tamano)) && tamano!=null);

        if(tamano != null){

            insertaCosa(fechaInicio, parseInt(tamano));

        }

    }

}

function insertaCosa(fechaInicio, tamano){

    var tablaCosas        = document.getElementById("tbodyTablaSimulacion");

    var fila            = document.createElement("tr");

    var tdFechaInicio    = document.createElement("td");

    var tdTamano        = document.createElement("td");

    var tdControles        = document.createElement("td");

    var i, inserted;

    tdFechaInicio.innerHTML = fechaInicio;

    tdTamano.innerHTML = tamano;

    tdControles.innerHTML = '<input name="btnEditarCosa" id="btnEditarCosa" type="button" value="E" onClick="editarCosa(this);"><input name="btnEliminarCosa" id="btnEliminarCosa" type="button" value="X" onClick="eliminarCosa(this);">';

    fila.appendChild(tdFechaInicio);

    fila.appendChild(tdTamano);

    fila.appendChild(tdControles);

    i=0;

    inserted = false;

    while(i<tablaCosas.childNodes.length && !inserted){

        if(tablaCosas.childNodes[i].childNodes[0].innerText > fechaInicio){

            tablaCosas.insertBefore(fila, tablaCosas.childNodes[i])

            inserted = true;

        }

        i++;

    }

    if(!inserted){

        tablaCosas.appendChild(fila);

    }

}

function eliminarCosa(boton){

    if(confirm("¿Deseas eliminar la Cosa?")){

        boton.parentNode.parentNode.parentNode.removeChild(boton.parentNode.parentNode);

    }

}

function editarCosa(boton){

    var fechaInicio, tamano

    do{

        fechaInicio = prompt("Fecha de Inicio: (aaaa-mm-dd)", boton.parentNode.parentNode.childNodes[0].innerText);

    }while(!isAnsiDate(fechaInicio) && fechaInicio!=null);

    if(fechaInicio != null){

        do{

            tamano = prompt("Tamaño del Lote:", boton.parentNode.parentNode.childNodes[1].innerText);

        }while(isNaN(parseInt(tamano)) && tamano!=null);

        if(tamano != null){

            boton.parentNode.parentNode.parentNode.removeChild(boton.parentNode.parentNode);    //eliminamos Cosa antigua

            insertaCosa(fechaInicio, parseInt(tamano));                                            //reemplazamos por nuevos datos.

        }

    }

}

function inicializaCosas(){

    insertaCosa("2005-01-01",10);

    insertaCosa("2005-05-15",20);

    insertaCosa("2005-03-21",30);

    insertaCosa("2004-04-26",40);

    insertaCosa("2005-04-19",50);

}

</script>

</head>

 
<body onLoad="inicializaCosas();">

<table id="tablaSimulacion" border="1">

    <thead>

    <tr>

        <td>Fecha de Inicio</td>

        <td>Tamaño de Lote</td>

        <td><input name="btnAgregarCosa" type="button" value="+" onClick="agregarCosa();"></td>

    </tr>

    </thead>

    <tbody id="tbodyTablaSimulacion">

    </tbody>

</table>

</body>

</html>