如何在PHP / MySQL中使用jQuery SlickGrid(加载服务器数据并保存更改)

时间:2010-09-23 08:35:27

标签: php jquery mysql ajax slickgrid

请在SlickGrid代码中找到的所有示例中,数据数组是在客户端随机生成的。

获取:我需要知道如何使用PHP从MySQL数据库中获取此信息并使用jQuery / AJAX将其返回给SlickGrid。

保存:我已经在StackOverflow上找到了一个链接,用于使用隐藏输入(Saving changes in SlickGrid)从网格中保存数据但是我不清楚我应该如何处理这些数据到PHP脚本。

一些详细的帮助和/或指示将不胜感激,我是一个菜鸟,我没有找到关于这个真棒插件的足够文档。

1 个答案:

答案 0 :(得分:8)

SlickGrid需要一个数据数组才能填充表格。您可以在PHP中将其创建为字符串,并在创建SlickGrid时在JavaScript中使用它。

请注意;这是快速,肮脏和未经测试的!

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>