Come utilizzare jQuery SlickGrid con PHP/MySQL (caricare i dati del server e salvare le modifiche)

Question

Per favore, in tutti gli esempi trovati nel codice SlickGrid, l'array di dati è stato generato casualmente sul lato client.

Getting: Ho bisogno di sapere come usare PHP per recuperare queste informazioni da un database MySQL e restituirlo utilizzando jQuery/AJAX a SlickGrid.

risparmio: Ho già trovato un link sul StackOverflow per salvare i dati dalla rete utilizzando un input nascosto (Saving changes in SlickGrid), ma non è davvero chiaro come avrei dovuto gestire questi dati su come ottenere allo script PHP.

Alcuni help e/o indicatori dettagliati saranno apprezzati, sono piuttosto un noob e non ho trovato documentazione adeguata su questo fantastico plugin.

Answer 1

SlickGrid necessita di una matrice di dati per popolare la tabella. Puoi crearlo come una stringa in PHP e utilizzarlo nel tuo JavaScript quando crei SlickGrid.

Nota; questo è veloce, sporco e non testato!

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>