Cách sử dụng jQuery SlickGrid với PHP/MySQL (tải dữ liệu máy chủ và lưu thay đổi)

Question

Vui lòng, trong tất cả các ví dụ được tìm thấy trong mã SlickGrid, mảng dữ liệu được tạo ngẫu nhiên ở phía máy khách.

Bắt đầu: Tôi cần biết cách sử dụng PHP để lấy thông tin này từ Cơ sở dữ liệu MySQL và trả lại nó bằng cách sử dụng jQuery/AJAX cho SlickGrid.

Tiết kiệm: Tôi đã tìm thấy một liên kết trên StackOverflow để lưu dữ liệu từ lưới điện sử dụng một đầu vào ẩn (Saving changes in SlickGrid) nhưng nó không thực sự rõ ràng làm thế nào tôi nên xử lý dữ liệu này vào việc để kịch bản PHP.

Một số trợ giúp chi tiết và/hoặc con trỏ sẽ được đánh giá cao, tôi là một noob và tôi không tìm thấy tài liệu đầy đủ về plugin tuyệt vời này.

Answer 1

SlickGrid cần một mảng dữ liệu để điền bảng. Bạn có thể tạo nó dưới dạng một chuỗi trong PHP và sử dụng nó trong JavaScript của bạn khi bạn tạo SlickGrid của mình.

Xin lưu ý; điều này nhanh chóng, bẩn thỉu và chưa được kiểm tra!

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>