Tema: Crear campos editables de una base de datos
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 16/06/2010, 12:21
Avatar de Adler
Adler
Colaborador
  
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 18 años, 10 meses
Puntos: 126
Respuesta: Crear campos editables de una base de datos
Hola

Lo primero es aconsejarte que te leas algún tutorial sobre AJAX

Te dejo un código con lo que se produce lo que te ocupa. Necesitas crear una tabla con tres campos (Id, nombre y permiso)

otorgar_permisos.php
Código PHP: 
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
  3. <head>
  4. <meta name="http-equiv" content="Content-type: text/html; charset=UTF-8"/>
  5. <style type="text/css">
  6. .color0 {background: orange;}
  7. .color1 {background: yellow;}
  8. </style>
  9. <script type="text/javascript">
  10. var ns4 = (document.layers)? true:false
  11. var ie4 = (document.all)? true:false
  12. var ns6 = (document.getElementById)? true:false
  13.  
  14. function captura_objeto(idnombre) {
  15.     if (ns6) {
  16.     return document.getElementById(idnombre);
  17.     } else if (ie4) {
  18.     return document.all[idnombre];
  19.     } else if (ns4) {
  20.     return document.layers[idnombre];
  21.     } else{
  22.     return null;
  23.     }
  24. }
  25.  
  26.  
  27.  
  28. function creaAjax(){
  29.     var ajaxs = ["Msxml2.XMLHTTP","Msxml2.XMLHTTP.4.0","Msxml2.XMLH TTP.5.0","Msxml2.XMLHTTP.3.0","Microsoft.XMLHTTP"];
  30.     var ajax = false;
  31.     for(var i=0 ; !ajax && i<ajaxs.length ; i++){
  32.         try{ 
  33.             ajax = new ActiveXObject(ajaxs[i]);   // Internet Explorer
  34.         }
  35.         catch(e) { 
  36.             ajax = false; 
  37.         }
  38.     }
  39.     if(!ajax && typeof XMLHttpRequest!='undefined') {
  40.         ajax = new XMLHttpRequest();  // Firefox, Opera 8.0+, Safari
  41.     }
  42.     return ajax;
  43. }
  44.  
  45.  
  46.  
  47. var control = true;
  48. function ActivarDesactivar_campos(Id, bol, acc) {
  49. //alert(bol+ " - " +control);
  50. var Id_tr = captura_objeto(Id);
  51. var td = Id_tr.getElementsByTagName("TD");
  52. var div = Id_tr.getElementsByTagName("DIV");
  53.  
  54.     if(control == bol && bol == true && acc == 0) {
  55.  
  56.         div[1].style.display = (div[1].style.display == 'none') ? 'block' : 'none';
  57.         var elemento1 = document.createElement("INPUT");
  58.         elemento1.setAttribute("type","text");
  59.         elemento1.setAttribute("size","10");
  60.         elemento1.setAttribute("maxlength","20");
  61.         elemento1.setAttribute("name","nombre");
  62.         elemento1.setAttribute("id","nombre");
  63.         elemento1.setAttribute("value", div[1].innerHTML);
  64.         td[1].appendChild(elemento1);
  65.  
  66.         div[2].style.display = (div[2].style.display == 'none') ? 'block' : 'none';
  67.         var elemento2 = document.createElement("SELECT");
  68.         elemento2.setAttribute("size","1");
  69.         elemento2.setAttribute("name","privilegio");
  70.         elemento2.setAttribute("id","privilegio");
  71.         opcioncur = document.createElement("OPTION");
  72.         opcioncur.textContent = "Tipo de Permiso";
  73.         opcioncur.value = div[2].innerHTML;
  74.         elemento2.appendChild(opcioncur);
  75.         opcion1 = document.createElement("OPTION");
  76.         opcion1.textContent = "Alto";
  77.         opcion1.value = "A";
  78.         elemento2.appendChild(opcion1);
  79.         opcion2 = document.createElement("OPTION");
  80.         opcion2.textContent = "Medio";
  81.         opcion2.value = "D";
  82.         elemento2.appendChild(opcion2);
  83.         opcion3 = document.createElement("OPTION");
  84.         opcion3.textContent = "Bajo";
  85.         opcion3.value = "F";
  86.         elemento2.appendChild(opcion3);
  87.         td[2].appendChild(elemento2);
  88.  
  89. control = (bol == true ? false : true);
  90.  
  91.     } else if(control == bol && bol == false && acc == 0) {
  92.  
  93.         var elem1 = document.getElementById("nombre");
  94.         var padre1 = elem1.parentNode;
  95.         padre1.removeChild(elem1);
  96.         div[1].style.display = (div[1].style.display == 'none') ? 'block' : 'none';
  97.  
  98.         var elem2 = document.getElementById("privilegio");
  99.         var padre2 = elem2.parentNode;
  100.         padre2.removeChild(elem2);
  101.         div[2].style.display = (div[2].style.display == 'none') ? 'block' : 'none';
  102.  
  103. control = (bol == true ? false : true);
  104.         
  105.     } else if(control == bol && bol == false && acc == 1) {
  106.  
  107.  
  108. // --- REVISAMOS LOS VALORES (sin son iguales no se usa Ajax)
  109. var elem1_old = div[1].innerHTML
  110. var elem1 = document.getElementById("nombre");
  111. var elem2_old = div[2].innerHTML
  112. var elem2 = document.getElementById("privilegio");
  113.  
  114.         if (elem1_old == elem1.value && elem2_old == elem2.value) {
  115.             div[1].textContent = elem1_old;
  116.             div[2].textContent = elem2_old;
  117.  
  118.         // ---- ELIMINA LOS ELEMENTOS
  119.             var padre1 = elem1.parentNode;
  120.             padre1.removeChild(elem1);
  121.             var padre2 = elem2.parentNode;
  122.             padre2.removeChild(elem2);
  123.  
  124.         // ---- MUESTRA REGISTRO SIN ACTUALIZAR
  125.             div[1].style.display = (div[1].style.display == 'none') ? 'block' : 'none';
  126.             div[2].style.display = (div[2].style.display == 'none') ? 'block' : 'none';
  127. control = true;
  128.  
  129.         } else {
  130.  
  131. // ---- ACTUALIZA REGISTRO
  132. var url = "Otorgar_Permisos_Ajax.php"
  133. var ajax=creaAjax();
  134. //var elem1 = document.getElementById("nombre");
  135. //var elem2 = document.getElementById("privilegio");
  136. ajax.open('POST',url,true);
  137. ajax.onreadystatechange = function() {
  138.  
  139.             if (ajax==null){
  140.                 alert ("Tu navegador web no soporta AJAX!");
  141.                 return;
  142.             }
  143.  
  144.             if (ajax.readyState==1 || ajax.readyState==2 || ajax.readyState==3){
  145.  
  146.                     } else if (ajax.readyState==4) {
  147.                             if (ajax.status==200) {        
  148.                     var valores = unescape(ajax.responseText);  
  149.                     div[1].textContent = valores.split(",")[0];
  150.                     div[2].textContent = valores.split(",")[1];
  151.  
  152.             // ---- ELIMINA LOS ELEMENTOS
  153.                     var padre1 = elem1.parentNode;
  154.                     padre1.removeChild(elem1);
  155.                     var padre2 = elem2.parentNode;
  156.                     padre2.removeChild(elem2);
  157.  
  158.             // ---- MUESTRA REGISTRO ACTUALIZADO
  159.                     div[1].style.display = (div[1].style.display == 'none') ? 'block' : 'none';
  160.                     div[2].style.display = (div[2].style.display == 'none') ? 'block' : 'none';
  161.  
  162.                             } else if (ajax.status==404) {
  163.                                             alert("La dirección no existe");
  164.  
  165.                                                     } else {
  166.                                         alert("Se ha producido un error");
  167.                                                     }
  168.                                         }
  169.                     }
  170. control = true;
  171.     
  172.     ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  173.             ajax.setRequestHeader('Content-Length', Id_tr.length);  
  174.     ajax.send('id='+Id+'&nombre='+escape(elem1.value)+'&nombre_old='+escape(div[1].innerHTML)+'&privilegio='+escape(elem2.value)+'&privilegio_old='+escape(div[2].innerHTML));
  175.             return;
  176.         }
  177.     }
  178. }
  179. </script>
  180. </head> 
  181. <body> 
  182. <table width="100%" border="1px">
  183. <tr>
  184. <th></th>
  185. <th>ID</th>
  186. <th>NOMBRE</th>
  187. <th>PRIVILEGIOS</th>
  188. </tr>
  189.  
  190. <?php 
  191. include($_SERVER["DOCUMENT_ROOT"]."/ink_utiles/ink_comunesbd.php");  
  192. $bd = new ClassConexionBD('database');
  193. $bd->ConexionBD();
  194.  
  195. $sql = $bd->consulta("SELECT Id, nombre, privilegio FROM Usuarios");
  196.  
  197.     if($bd->RS($sql)>0) {  
  198. $tabla = 0;
  199.         while($registros = $bd->arreglo($sql)){  
  200. $resto = ($tabla % 2);
  201.             switch ($resto) { // Coloreamos cada tr        
  202.                 case 0: $estilo = "color0"; break;        
  203.                 case 1: $estilo = "color1"; break;
  204.             }
  205.  
  206. //------------------------- Valores de la consulta -------------------------
  207. ?>
  208. <tr width="100%" id="<?=$registros["Id"]?>">
  209. <th><img src="./cancelar.gif" onclick="javascript:ActivarDesactivar_campos(<?=$registros["Id"]?>, false, 0);" />&nbsp;<img src="./editar.gif" onclick="javascript:ActivarDesactivar_campos(<?=$registros["Id"]?>, false, 1);" />&nbsp;<img src="./mostar.gif" onclick="javascript:ActivarDesactivar_campos(<?=$registros["Id"]?>, true, 0);" /></th>
  210. <td id="td_<?=$tabla?>[]" class="<?=$estilo?>">
  211. <div id="<?=$tabla?>[]" style="display:block;"><?=$registros["Id"]?></div>
  212. </td>
  213. <td id="td_<?=$tabla?>[]" class="<?=$estilo?>">
  214. <div id="<?=$tabla?>[]" style="display:block;"><?=$registros["nombre"]?></div>
  215. </td>
  216. <td id="td_<?=$tabla?>[]" class="<?=$estilo?>">
  217. <div id="<?=$tabla?>[]" style="display:block;"><?=$registros["privilegio"]?></div>
  218. </td>
  219. </tr>
  220. <?php
  221. $tabla++;
  222. //------------------------------------------------------
  223.         }
  224.     }
  225. $bd->limparRS($sql);
  226. $bd->limpiarCon();
  227. ?>
  228. </table>
  229. </body> 
  230. </html>

otorgar_permisos_ajax.php
Código PHP: 
Ver original
  1. <?php
  2. $campos_valor_actualizar = Array();
  3. $respuesta = "";
  4.  
  5. $nomb = trim($_POST["nombre"]);
  6. $nomb_old = trim($_POST["nombre_old"]);
  7. $priv = trim($_POST["privilegio"]);
  8. $priv_old = trim($_POST["privilegio_old"]);
  9.  
  10. if ($nomb == $nomb_old) {
  11. $respuesta = $nomb_old;
  12. } else {
  13. $respuesta = $nomb;
  14. array_push($campos_valor_actualizar, "nombre = '".$nomb."'");
  15. }
  16.  
  17. if ($priv == $priv_old) {
  18. $respuesta .= "," .$priv_old;
  19. } else {
  20. $respuesta .= "," .$priv;
  21. array_push($campos_valor_actualizar, "privilegio = '".$priv."'");
  22. }
  23.  
  24. include($_SERVER["DOCUMENT_ROOT"]."/ink_utiles/ink_comunesbd.php");  
  25. $bd = new ClassConexionBD('database');
  26. $bd->ConexionBD();
  27.  
  28. $sql = $bd->consulta("UPDATE Usuarios SET " .implode(",", $campos_valor_actualizar). " WHERE Id = ".$_POST["id"]."");
  29. //$bd->limparRS($sql);
  30. $bd->limpiarCon();
  31.  
  32.  
  33. echo $respuesta;
  34. ?>

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />