Wie verwendet man jQuery SlickGrid mit PHP/MySQL (Serverdaten laden und Änderungen speichern)

Question

Bitte, in allen Beispielen in der SlickGrid Code wurde das Daten-Array auf der Client-Seite zufällig generiert.

Getting: Ich muss wissen, wie man PHP verwendet, um diese Informationen aus einer MySQL-Datenbank zu holen und sie mit jQuery/AJAX zum SlickGrid zurückzugeben.

Ersparnis: Ich fand schon einen Link auf Stackoverflow für aus dem Netz zum Speichern von Daten eines versteckten Eingang mit (Saving changes in SlickGrid), aber es ist nicht wirklich klar, wie ich soll diese Daten auf behandeln an den PHP-Skript zu bekommen.

Einige detaillierte Hilfe und/oder Hinweise werden geschätzt werden, ich bin eher ein Noob und ich fand keine ausreichende Dokumentation auf diesem tollen Plugin.

Answer 1

SlickGrid benötigt ein Array von Daten, um die Tabelle zu füllen. Sie können dies als eine Zeichenfolge in PHP erstellen und diese in Ihrem JavaScript verwenden, wenn Sie Ihr SlickGrid erstellen.

Bitte beachten Sie; das ist schnell, dreckig und ungetestet!

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>