简单的KendoUI网格没有填充

时间:2014-06-18 23:22:55

标签: php json kendo-ui kendo-grid

关于这个主题的几个不同的问题,但没有一个答案有帮助,所以我想试着看看是否有人能想出来......

所以我有一个简单的网格,这里是HTML / PHP:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo PROPERTY_TITLE; ?></title>

<!-- LOAD KENDO CSS -->
<link rel="stylesheet" type="text/css" href="css/kendo.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/kendo.common.min.css"/>
<link rel="stylesheet" type="text/css" href="css/kendo.default.min.css"/>

<!-- -------------- -->

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="<?php echo BASE_URL; ?>css/style.css" />
<script src="js/jquery.js"> // REQUIRED FOR THIS APPLICATION TO FUNCTION </script>

<!-- LOAD KENDO -->
<script type="text/javascript" src="js/kendo.all.min.js"> // REQUIRED FOR THIS APPLICATION TO FUNCTION </script>
<!-- ---------- -->
</head>

<body class="bg">
<div class="grid-box7 box2close min_height_700" style="display: none;">

    <script>
        // Function to build the grid
        function generateRawDataGrid() {
            var from = $("#fromDate").val();
            var to = $("#toDate").val();

            <? if ( isset($_GET['source']) && is_numeric($_GET['source']) ) { ?>
            var source = <? echo trim($_GET['source']); ?>;
            <? } else { ?>
            var source = '';
            <? } ?>




            $(".li_current_report").html("Raw Statistical Data");
            $("#rawDataGrid").kendoGrid({
                columns: [
                    {   title: "Action",
                        field: "comment"
                    }
                ],
                dataSource: {
                    transport: {
                        read: {
                            url: "data/get_stats.php?from=" + from + "&to=" + to + "&source=" + source + "&rt=3"
                        }
                    },
                    schema: {
                        data: "data"
                    },
                    type: "json"
                },
                pageable: {
                    refresh: true,
                    pageSize: 15,
                    pageSizes: [
                        15,30,60,100
                    ]
                },
                sortable: true,
                filterable: true,
                scrollable: false,
                selectable: "row",
                reorderable: true
            }); // END: Report Grid

        } // END: Function generateGrid()

    </script>

    <div id="rawDataGrid" >
        <!-- Grid is here -->
    </div>
</div>

</body>
</html>

这是数据源代码:

// Build SQL statement
        $SQL_STATS = "
                    SELECT      comment
                    FROM        stats_tracking
                    WHERE       date_entered between '" . $FROM . "' AND '" . $TO . "'  AND
                                action_detail1 NOT In(" . $excludeIPs . ") AND active = 1";

        if ( is_numeric($_GET['source']) && trim($_GET['source']) != "" ){
            $SQL_STATS .= "
                            AND source = '" . $_GET['source'] . "'";
        }
        $SQL_STATS .= "
                    ORDER BY    date_entered DESC
                ";

        // Get the data
        $statResult = mysql_query($SQL_STATS); // Run the actual query.

        $dataOut = array(); // Create empty array for temp data to store in main output array

        while ( $stat = mysql_fetch_object($statResult) ) {
            $dataOut[] = $stat;
        }

        header("Content-type: application/json");
        echo "{\"data\":" . json_encode($dataOut). "}";

输出似乎很好 - LINT也很好,这里有一部分:

{"data":[{"comment":"Site Visit"},{"comment":"Site Visit"},{"comment":"Site Visit"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"Site Visit"},{"comment":"View Contact Information"},{"comment":"Site Visit"},{"comment":"View Contact Information"},{"comment":"Doctor Site Visit"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"Doctor Site Visit"},{"comment":"View Contact Information"},{"comment":"Site Visit"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"View Contact Information"},{"comment":"Doctor Site Visit"},{"comment":"View Contact Information"},{"comment":"Doctor Site Visit"}]}

但是网格没有渲染。我使用了几个JSON验证器。浏览器将此输出视为APPLICATION / JSON。

有什么想法吗?

提前感谢所有人!

1 个答案:

答案 0 :(得分:1)

我不知道你在哪里调用这种方法。 generateRawDataGrid()

也许你需要创建一个document.ready()函数并从那里调用它。

$(document).ready(function () {
   generateRawDataGrid();
});