Xajax se ha vuelto parte de mi trabajo a lo largo de este ya casi año de vida laboral, por lo que mi experiencia, aunque poca, ha ido evolucionando poco a poco. Si me hubieran preguntado como hacer para añadir una fila a una tabla les habria dicho que no se podía o que mejor agregaran una tabla completa mediante el comando addAssign. Hoy, con un poco más de experiencia, les mostraré como podemos agregar el número de filas y campos que queramos a una tabla.
El proceso es simple, iremos creando las etiquetas o tags HTML según su jerarquía y le iremos añadiendo dentro el contenido que corresponda. Para esto utilizaremos los comandos addCreate que crea nuevas etiquetas HTML, y addAssign que como ya deberían saber, agrega o inserta en el atributo indicado el valor que le pasemos por parametro. Primero crearemos el tag tr y luego cada uno de los tags td que necesitemos, para así, en ultima instancia, asignar el contenido de cada campo.
Veamos como quedaría nuestra función PHP agregaFila()
function agregarFila($formulario){ $respuesta = new xajaxResponse(); extract($formulario); $id_campos = $cant_campos = $num_campos+1; $str_html_td1 = "$txtNombre" ; $str_html_td2 = "$txtEdad"; $str_html_td3 = "$txtDireccion"; $str_html_td4 = "$selSexo"; $str_html_td5 = "$selEstCivil"; $str_html_td6 = '<img src="images/delete.png" width="16" height="16" alt="Eliminar" onclick="if(confirm(\'Realmente desea eliminar este detalle?\')){xajax_eliminarFila('. $id_campos .', proyecto.cant_campos.value);}"/>'; if($num_campos == 0){ // creamos un encabezado de lo contrario solo agragamos la fila $respuesta->addCreate("tbDetalle", "tr", "rowDetalle_0"); $respuesta->addCreate("rowDetalle_0", "th", "tdDetalle_01"); //creamos los campos $respuesta->addCreate("rowDetalle_0", "th", "tdDetalle_02"); $respuesta->addCreate("rowDetalle_0", "th", "tdDetalle_03"); $respuesta->addCreate("rowDetalle_0", "th", "tdDetalle_04"); $respuesta->addCreate("rowDetalle_0", "th", "tdDetalle_05"); $respuesta->addCreate("rowDetalle_0", "th", "tdDetalle_06"); $respuesta->addAssign("tdDetalle_01", "innerHTML", "Nombre"); //asignamos el contenido $respuesta->addAssign("tdDetalle_02", "innerHTML", "Edad"); $respuesta->addAssign("tdDetalle_03", "innerHTML", "Direccion"); $respuesta->addAssign("tdDetalle_04", "innerHTML", "Sexo"); $respuesta->addAssign("tdDetalle_05", "innerHTML", "Estado Civil"); $respuesta->addAssign("tdDetalle_06", "innerHTML", "Eliminar"); } $idRow = "rowDetalle_$id_campos"; $idTd = "tdDetalle_$id_campos"; $respuesta->addCreate("tbDetalle", "tr", $idRow); $respuesta->addCreate($idRow, "td", $idTd."1"); //creamos los campos $respuesta->addCreate($idRow, "td", $idTd."2"); $respuesta->addCreate($idRow, "td", $idTd."3"); $respuesta->addCreate($idRow, "td", $idTd."4"); $respuesta->addCreate($idRow, "td", $idTd."5"); $respuesta->addCreate($idRow, "td", $idTd."6"); /* * Esta parte podria estar dentro de algun ciclo iterativo */ $respuesta->addAssign($idTd."1", "innerHTML", $str_html_td1); //asignamos el contenido $respuesta->addAssign($idTd."2", "innerHTML", $str_html_td2); $respuesta->addAssign($idTd."3", "innerHTML", $str_html_td3); $respuesta->addAssign($idTd."4", "innerHTML", $str_html_td4); $respuesta->addAssign($idTd."5", "innerHTML", $str_html_td5); $respuesta->addAssign($idTd."6", "innerHTML", $str_html_td6); /* aumentamos el contador de campos */ $respuesta->addAssign("num_campos","value", $id_campos); $respuesta->addAssign("cant_campos" ,"value", $id_campos); return $respuesta; }
El HTML para esta aplicacion:
<form name="proyecto" id="proyecto" action="" method="post"> <input type="hidden" id="num_campos" name="num_campos" value="0" /> <input type="hidden" id="cant_campos" name="cant_campos" value="0" /> <div id="cont" class="container"> <fieldset> <legend>El formulario</legend> <div class="top"> <label class="label" for="txtNombre">Nombre:</label> <div class="div_texbox"> <input type="text" id="txtNombre" name="txtNombre" value="" class="textbox" /></div> <label class="label" for="txtEdad">Edad:</label> <div class="div_texbox"> <input type="text" id="txtEdad" name="txtEdad" value="" class="textbox txtUser" /></div> <label class="label" for="txtDireccion">Direccion:</label> <div class="div_texbox"> <input type="text" id="txtDireccion" name="txtDireccion" value="" class="textbox txtCmt" /></div> <label class="label" for="selSexo">Sexo:</label> <div class="div_texbox"> <select id="selSexo" name="selSexo" class="textbox txtFec"> <option value="-">Seleccione</option> <option value="Hombre">Hombre</option> <option value="Mujer">Mujer</option> </select> </div> <label class="label" for="selEstCivil">Estado Civil:</label> <div class="div_texbox"> <select id="selEstCivil" name="selEstCivil" class="textbox txtFec"> <option value="-">Seleccione</option> <option value="Soltero">Soltero</option> <option value="Casado">Casado</option> <option value="Viudo">Viudo</option> </select> </div> </div> </fieldset> <div class="button_div"> <input type="reset" id="btnCancel" name="btnCancel" value="Cancelar" class="buttons_CANCEL" onclick="xajax_cancelar();" /> <input type="button" id="btnAgregar" name="btnAgregar" value="Agregar Persona" class="buttons_aplicar" onclick="xajax_agregarFila(xajax.getFormValues('proyecto'));" /> </div> <fieldset class="fieldset"> <legend class="legend"> Detalle de Personas </legend> <div class="clear"></div> <div id="form3" class="form-horiz"> <table width="100%" id="tblDetalle" class="listado"> <tbody id="tbDetalle"></tbody> </table> </div> </fieldset> </div> </form>
Y como sabroso entremes, le traemos… la función que elimina las filas agregadas por la función anterior.
function eliminarFila($id_campo, $cant_campos){ $respuesta = new xajaxResponse(); $respuesta->addRemove("rowDetalle_$id_campo"); //borro el detalle que indica el parametro id_campo -- $cant_campos; //Resto uno al numero de campos y si es cero borro todo if($cant_campos == 0){ $respuesta->addRemove("rowDetalle_0"); $respuesta->addAssign("num_campos", "value", "0"); //dejo en cero la cantidad de campos para seguir agregando si asi lo desea el usuario $respuesta->addAssign("cant_campos", "value", "0"); } $respuesta->addAssign("cant_campos", "value", $cant_campos); return $respuesta; }
Así de facil y bonito es agregar filas a las tablas dinamicamente usando xajax… las opciones son muchas y las dejo a su imaginación o necesidad…
Espero les sirva y cualquier duda o comentario responderé a la brevedad.
Adios.
Este ejemplo lo puedes ver en el siguiente enlace:
| ejemplo funcionando de Agregar Filas con xajax y PHP |
Tambien puedes decargar estos ejemplos:
| archivos de Agregar Filas con xajax y PHP | |
| Si te gustó o te sirvió, ya sabes que hacer |
|
3 de Febrero, 2009 - 9:49
saludos amigo este tutorial esta excelente de verdad que me has ayudado mucho lo unico que me gustaria que hicieras seria que lo hicieras compatible con la ultima version de xajax la 0.5 gracias de antemano