Cómo usar jQuery SlickGrid con PHP/MySQL (cargar datos del servidor y guardar cambios)

Question

Por favor, en todos los ejemplos encontrados en el código SlickGrid, la matriz de datos se generó aleatoriamente en el lado del cliente.

Obteniendo: Necesito saber cómo usar PHP para obtener esta información de una base de datos MySQL y devolverla usando jQuery/AJAX a SlickGrid.

Ahorro: ya he encontrado un enlace en StackOverflow para guardar los datos de la red utilizando un campo oculto (Saving changes in SlickGrid) pero no es muy clara la forma en que debería manejar estos datos en conseguir al script PHP.

Se agradecerán algunos consejos y/o sugerencias detallados, soy bastante novato y no encontré documentación adecuada sobre este impresionante plugin.

Answer 1

SlickGrid necesita una matriz de datos para rellenar la tabla. Puedes crear esto como una cadena en PHP y usar eso en tu JavaScript cuando crees tu SlickGrid.

Tenga en cuenta; esto es rápido, sucio y no probado!

PHP

$data = ''; 
$i = 0; 

$query = " 
    SELECT 
     `title`, `duration`, `percentComplete`, `start`, `finish`, `effortDriven` 
    FROM 
     `myTable` 
"; 
$result = mysql_query($query); 
while($row = mysql_fetch_array($result, MYSQL_ASSOC)){ 
    $data .= ' 
     data['.$i.'] = { 
      title: "'.$row['title'].'", 
      duration: "'.$row['duration'].'", 
      percentComplete: "'.$row['percentComplete'].'", 
      start: "'.$row['start'].'", 
      finish: "'.$row['finish'].'", 
      effortDriven: "'.$row['percentComplete'].'" 
     }; 
    '; 

    $i++; 
} 

JavaScript

<script type="text/javascript"> 
    var grid; 

    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: false, 
     enableColumnReorder: false 
    }; 

    $(function() { 
     var data = []; 
     <?php echo $data; ?> //This is where we echo the PHP variable $data which contains our JavaScript array as a string. 

     grid = new Slick.Grid($("#myGrid"), data, columns, options); 
    }) 
</script>