Jak używać jQuery SlickGrid z PHP/MySQL (ładowanie danych serwera i zapisywanie zmian)

Question

We wszystkich przykładach znalezionych w kodzie SlickGrid tablica danych została losowo wygenerowana po stronie klienta.

Pierwsze: Muszę wiedzieć, jak używać PHP do pobierania informacji z bazy danych MySQL i przesłać go za pomocą jQuery/AJAX do SlickGrid.

Zapisywanie: ja już znalazłem link na StackOverflow do zapisywania danych z sieci za pomocą ukrytego wejścia (Saving changes in SlickGrid), ale to naprawdę nie jest jasne, w jaki sposób powinien obsługiwać te dane na dotarcie do skryptu PHP.

Zostanie doceniona pewna szczegółowa pomoc i/lub wskazówki, jestem raczej noobem i nie znalazłem odpowiedniej dokumentacji na temat tej niesamowitej wtyczki.

Answer 1

SlickGrid potrzebuje tablicy danych, aby zapełnić tabelę. Możesz stworzyć to jako ciąg znaków w PHP i używać go w JavaScript podczas tworzenia SlickGrid.

Uwaga; to jest szybkie, brudne i niesprawdzone!

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>