un grid llamado slickgrid con jquery

chalchis · #1 (**permalink**) 23/07/2010, 21:17

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

chalchis · #2 (**permalink**) 24/07/2010, 03:39

una posible solucion que hasta el momento
me funciona bien

Código:

function deletefila()
		{			
			alert("borrando fila 5");
			data.splice(5,1); 
            grid.removeAllRows(); 
            grid.render(); 
			
		}

saludos