Search code examples
phpjquerymysqlajaxslickgrid

How to use jQuery SlickGrid with PHP / MySQL (load server data and save changes)


Please, in all the examples found in the SlickGrid code, the data array was randomly generated on the client side.

Getting: I need to know how to use PHP to fetch this information from a MySQL Database and return it using jQuery / AJAX to the SlickGrid.

Saving: I already found a link on StackOverflow for saving data from the grid using a hidden input (Saving changes in SlickGrid) but it's not really clear how I ought to handle this data on getting to the PHP script.

Some detailed help and/or pointers will be appreciated, I'm rather a noob and I did not find adequate documentation on this awesome plugin.


Solution

  • SlickGrid needs an array of data in order to populate the table. You can create this as a string in PHP and use that in your JavaScript when you create your SlickGrid.

    Please note; this is quick, dirty and untested!

    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>