Ver Mensaje Individual
  #1 (permalink)  
Antiguo 23/07/2010, 21:17
Avatar de chalchis
chalchis
 
Fecha de Ingreso: julio-2003
Mensajes: 1.773
Antigüedad: 21 años, 4 meses
Puntos: 21
Pregunta un grid llamado slickgrid con jquery

hola amigos he buscado como implementar este grid basado en jquery

http://wiki.github.com/mleibman/SlickGrid/

ejemplos

http://wiki.github.com/mleibman/SlickGrid/examples

solo hay un problema casi no hay documentación para que uno
pueda manipularlo hay muchos ejemplos pero si se hace un poco
complicado asi que les escribo para ver si me pueden ayudar

1.-ver la posibilidad de insertar datos desde un boton
2.-poder seleccionar una fila y seleccionarla desde un boton
3.-eliminar la fila deseada

he estado trabajando sobre este ejmplo

http://mleibman.github.com/SlickGrid...e1-simple.html

y por lo que he deducido eh resuelto el punto 1 y 2 haciendo esto

Código:
<body>
		<table width="100%">
		<tr>
			<td valign="top" width="50%">
				<div id="myGrid" style="width:600px;height:500px;"></div>
			</td>
			<td valign="top">
				<h2>Demonstrates:</h2>
				<ul>
					<li>basic grid with minimal configuration</li>
					<li><input type="button" value="insertar" onclick="agregar()"></li>
					<li><input type="button" value="seleccionar" onclick="seleccionar()"></li>
					<li><input type="button" value="ir a la fila 6" onclick="selfila()"></li>
                    <li><input type="button" value="borrar" onclick="deletefila()"></li>
				</ul>
			</td>
		</tr>
		</table>

		<script language="JavaScript" src="../lib/jquery-1.4.2.min.js"></script>
		<script language="JavaScript" src="../lib/jquery.event.drag-2.0.min.js"></script>

        <script language="JavaScript" src="../slick.grid.js"></script>

		<script>		
		var grid;
		var data = [];

		var columns = [
			{id:"title", name:"Title", field:"title"},
			{id:"duration", name:"Duration", field:"duration"},
			{id:"%", name:"% Complete", field:"percentComplete"},
			{id:"start", name:"Start", field:"start"},
			{id:"finish", name:"Finish", field:"finish"},
			{id:"effort-driven", name:"Effort Driven", field:"effortDriven"}
		];

		var options = {
			enableCellNavigation: true,
            enableColumnReorder: false
		};
		//--------------
		function agregar()
		{
			data.push({"title":"600", "duration":"5 day", "percentComplete":50, "start": "01/01/2009", "finish": "01/05/2009", "effortDriven":"false"});  
			grid.updateRowCount(); 
			grid.render(); 
			//alert("listo");
			//grid.removeAllRows();		
		}
		function seleccionar()
		{			
			grid.setSelectedRows([0,1,2,3,6]);
		}
		function selfila()
		{
			grid.gotoCell(6,0,false);
		}
		function deletefila()
		{			
					}
		//-------------------
		
		$(function() {
            //var data = [];
			for (var i = 0; i < 500; i++) {
				data[i] = {
                    title: "Task " + i,
                    duration: "5 days",
                    percentComplete: Math.round(Math.random() * 100),
                    start: "01/01/2009",
                    finish: "01/05/2009",
                    effortDriven: (i % 5 == 0)
                };
			}
			
			grid = new Slick.Grid($("#myGrid"), data, columns, options);
		})

		</script>		
	</body>
lo unico que no he podido es como eliminar una fila especifica y que el grid
se refresque

saludos

espero sus comentarios
__________________
gerardo

Última edición por chalchis; 23/07/2010 a las 21:23