Foros del Web » Programando para Internet » Javascript »

ayuda con grid editable

Estas en el tema de ayuda con grid editable en el foro de Javascript en Foros del Web. hola comunidad, estoy tratando de hacer un grid editable con javascript, no estoy usando ningun framework porque en el proyecto en el que estoy no ...
  #1 (permalink)  
Antiguo 12/07/2010, 08:48
 
Fecha de Ingreso: marzo-2009
Mensajes: 155
Antigüedad: 15 años, 4 meses
Puntos: 1
ayuda con grid editable

hola comunidad, estoy tratando de hacer un grid editable con javascript, no estoy usando ningun framework porque en el proyecto
en el que estoy no quieren usar ningun framework de javascript, bueno tengo hecho algunas cosas pero me faltan muchas como por ejemplo

- el grid no tiene ningun estilo y quisiera ponerle uno que se paresca mas menos al grid de extjs o al de otro framework.
- no se como marcar las celdas que han sido editadas, creo que esto es para optimizar el envia de informacion a la base de datos
solo enviando la informacion modificada (si estoy mal que alguien me rectifique) y no se como hacer esto.
- otro problema que tengo es que cuando se hace clic sobre una celda entonces se me crea un input pero se me aumenta el tamaño de la celda,
quisiera que cuando hiciera clic en la celda se me cree el input y se ajustara al tamaño de la celda, es decir, que no se notara el cambio
cuando se crea el input o cuando desaparece.

aqui les pongo el codigo que tengo hecho para que el que pueda me ayude, se que estoy tratando de reinventar la rueda pero
tengo que acojerme a lo que se dice en el proyecto.

saludos manuelle

Código:
hola comunidad



<html>
<body onload="iniciarTabla();">

		<table id="acusados" style="border: solid 1px #7f94aa; width: 695px; text-align: center;" cellspacing="0" >
		<tr>
		   <th id="celda" ><label>Nombre</label>   </th>
		   <th id="celda" ><label>Primer Apellido</label>   </th>
		   <th id="celda" ><label>Segundo Apellido</label>   </th>
		   <th id="celda" ><label>CI</label>   </th>
		</tr>
		
		<tr>
		   <td id="celda" ><label>Manuel</label>   </td>
		   <td id="celda" ><label>Delgado</label>   </td>
		   <td id="celda" ><label>Fernandez</label>   </td>
		   <td id="celda" ><label>87112734953</label>   </td>
		</tr>
		<tr>
		   <td id="celda" ><label>Pedro</label>   </td>
		   <td id="celda" ><label>Hernandez</label>   </td>
		   <td id="celda" ><label>Lopez</label>   </td>
		   <td id="celda" ><label>87112734954</label>   </td>
		</tr>
		<tr>
		   <td id="celda" ><label>julio</label>   </td>
		   <td id="celda" ><label>Frenandez</label>   </td>
		   <td id="celda" ><label>Figueredo</label>   </td>
		   <td id="celda" ><label>87112734955</label>   </td>
		</tr>
		</table> 
		
		<script type="text/javascript">
		
		function iniciarTabla()
		{
		  var tabla = document.getElementById('acusados');
		  filas = tabla.getElementsByTagName('tr');
		  var cont= 0;
		  for (i=1; i< tabla.rows.length; i++) 
		  {
			tabla.rows[i].cells[0].onclick = function() {crearInput(this)}; 
			tabla.rows[i].cells[1].onclick = function() {crearInput(this)}; 
			tabla.rows[i].cells[2].onclick = function() {crearInput(this)}; 
			tabla.rows[i].cells[3].onclick = function() {crearInput(this)}; 
			nueva_columna = tabla.rows[i].insertCell(4);
			ele = document.createElement('input'); 
			ele.type = 'button'; 
			ele.id="celda";
			ele.value = "Eliminar";
			ele.onclick = function() {borrar_acusados(this)} ;
			nueva_columna.id = 'celda'; 
			nueva_columna.width='20px';  
			nueva_columna.align='center';
			nueva_columna.appendChild(ele);
		  } 
		}
		
		function borrar_acusados(obj) 
		{
			tabla = obj.parentNode.parentNode.parentNode;
			tabla.removeChild(obj.parentNode.parentNode);
		}
		
		function crearInput(celda)
		{
		  celda.onclick = function() {return false}
		  txt = celda.innerHTML;
		  celda.innerHTML = '';
		  
		  var textbox= document.createElement('input');
		  obj = celda.appendChild(textbox);
		  obj.value = txt;
		  obj.focus();
		  obj.onblur = function() 
		  {
			txt = this.value;
			if(!validarLetras(txt))
			{
				alert("Error: verifique que el campo contenga solo letras");
			}
				celda.removeChild(obj);
				celda.innerHTML = txt;
				celda.onclick = function() {crearInput(celda)}
		  }
		}
		
		</script>

</body>
</html>
  #2 (permalink)  
Antiguo 12/07/2010, 17:31
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 1 mes
Puntos: 834
Respuesta: ayuda con grid editable

Por qué no usas la propiedad contentEditable para eso:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<
title>Documento sin título</title>
</
head>

<
body><table width="586" border="0" cellspacing="0" cellpadding="0">
  <
tr>
    <
td>&nbsp;</td>
    <
td>&nbsp;</td>
    <
td>&nbsp;</td>
  </
tr>
  <
tr>
    <
td>&nbsp;</td>
    <
td><div contenteditable="true">contenido editable</div></td>
    <
td>&nbsp;</td>
  </
tr>
  <
tr>
    <
td>&nbsp;</td>
    <
td>&nbsp;</td>
    <
td>&nbsp;</td>
  </
tr>
</
table>

</
body>
</
html
  #3 (permalink)  
Antiguo 12/07/2010, 18:10
Avatar de minkweb  
Fecha de Ingreso: septiembre-2005
Mensajes: 443
Antigüedad: 18 años, 10 meses
Puntos: 14
Respuesta: ayuda con grid editable

Código:
<html>
<style>
#celda{
	width:200px;
}

</style>
<body onload="iniciarTabla();">

		<table id="acusados" border="1" ystyle="border: solid 1px #7f94aa; text-align: center;" cellspacing="0" >
		<tr>
		   <th id="celda" ><div>Nombre</div>   </th>
		   <th id="celda" ><div>Primer Apellido</div>   </th>
		   <th id="celda" ><div>Segundo Apellido</div>   </th>
		   <th id="celda" ><div>CI</div>   </th>
		</tr>
		
		<tr>
		   <td id="celda" ><div>Manuel</div>   </td>
		   <td id="celda" ><div>Delgado</div>   </td>
		   <td id="celda" ><div>Fernandez</div>   </td>
		   <td id="celda" ><div>87112734953</div>   </td>
		</tr>
		<tr>
		   <td id="celda" ><div>Pedro</div>   </td>
		   <td id="celda" ><div>Hernandez</div>   </td>
		   <td id="celda" ><div>Lopez</div>   </td>
		   <td id="celda" ><div>87112734954</div>   </td>
		</tr>
		<tr>
		   <td id="celda" ><div>julio</div>   </td>
		   <td id="celda" ><div>Frenandez</div>   </td>
		   <td id="celda" ><div>Figueredo</div>   </td>
		   <td id="celda" ><div>8711273495aaaaaaaaaaaaaaa<br />aaazaaaaaaaaaaaaa5</div>   </td>
		</tr>
		</table> 
		
		<script type="text/javascript">
		
		function iniciarTabla()
		{
		  var tabla = document.getElementById('acusados');
		  filas = tabla.getElementsByTagName('tr');
		  var cont= 0;
		  for (i=1; i< tabla.rows.length; i++) 
		  {
			tabla.rows[i].cells[0].onclick = function() {crearInput(this)}; 
			tabla.rows[i].cells[1].onclick = function() {crearInput(this)}; 
			tabla.rows[i].cells[2].onclick = function() {crearInput(this)}; 
			tabla.rows[i].cells[3].onclick = function() {crearInput(this)}; 
			nueva_columna = tabla.rows[i].insertCell(4);
			ele = document.createElement('input'); 
			ele.type = 'button'; 
			ele.id="celda";
			ele.value = "Eliminar";
			ele.onclick = function() {borrar_acusados(this)} ;
			nueva_columna.id = 'celda'; 
			nueva_columna.width='20px';  
			nueva_columna.align='center';
			nueva_columna.appendChild(ele);
		  } 
		}
		
		function borrar_acusados(obj) 
		{
			tabla = obj.parentNode.parentNode.parentNode;
			tabla.removeChild(obj.parentNode.parentNode);
		}
		
		function getDiv(obj){
			divs = obj.getElementsByTagName('div')
			return divs[0]
		}
		
		function crearInput(celda)
		{
		  celda.onclick = function() {return false}
		  ancho = getDiv(celda).offsetWidth;
		  txt = celda.innerHTML;
		  celda.innerHTML = '';
		  
		  var textbox= document.createElement('input');
		  obj = celda.appendChild(textbox);
		  obj.style.width = ancho+'px';
		  obj.value = txt;
		  obj.focus();
		  obj.onblur = function() 
		  {
			txt = this.value;
			if(!validarLetras(txt))
			{
				alert("Error: verifique que el campo contenga solo letras");
			}
				celda.removeChild(obj);
				celda.innerHTML = txt;
				celda.onclick = function() {crearInput(celda)}
		  }
		}
		
		</script>

</body>
</html>
Eso te soluciona el problema de el tamaño....
__________________
Juegos
Juegos iphone
  #4 (permalink)  
Antiguo 13/07/2010, 08:04
 
Fecha de Ingreso: marzo-2009
Mensajes: 155
Antigüedad: 15 años, 4 meses
Puntos: 1
Respuesta: ayuda con grid editable

gracias por responder me ha servido de gran ayuda lo que me han explicado pero todavia me quedan algunas dudas como estas

--Como poner una imagen cuando se halla modificado la celda

--Como escribir bastante texto en la celda y que no se modifique el tamaño de la misma pero que no se pierda la información. ej si en uno de los input se escribe demasiado texto entonces la celda crece, yo lo que necesito es que la celda se quede del mismo tamaño y se mostrara solo la informacion hasta el tamaño de la celda pero que cuando se cree el input se muestre toda la informacion.

--otro detalle es que quisiera que no se notara cuando se hace click sobre la celda que se ha creado un input, me refiero al tamaño al tipo de letra y como ajusto el texto a los bordes del input, estuve probando y no me funciono.

gracias por la ayuda que me han dado

saludos manuel

Etiquetas: editable, grid
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:32.