剑道UI填充网格 - Kendo UI Populating Grid

Kendo UI Populating Grid

本文关键字：网格填充 UI 剑道 | 更新日期: 2023-09-27

我试图通过引入我自己的数据来模仿这个例子(http://demos.kendoui.com/web/grid/column-menu.html)，但是当我运行页面时，它在每个列中显示'undefined'。

当我在浏览器中输入数据源链接时，它会显示表中的所有数据。我不知道我哪里做错了。

代码:

<html>
<head>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.blueopal.min.css" />
<script type="text/javascript" src="http://cdn.kendostatic.com/2012.2.710/js/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
</head>
<div id="example" class="k-content">
            <div id="grid"></div>
            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "data",
                            transport: {
                                read: "http://localhost:8888/stationslist.php"
                            },
                            schema: {
                                model: {
                                    fields: {
                                        Region: { type: "string" },
                                        City: { type: "string" },
                                        State: { type: "string" },
                                        Country: { type: "string" }                                        
                                    }
                                }
                            },
                            pageSize: 30,
                            serverPaging: true,
                            serverFiltering: true,
                            serverSorting: true
                        },
                        height: 430,
                        sortable: true,
                        filterable: true,
                        columnMenu: true,
                        pageable: true,
                        columns: [ {
                                field: "Region",
                                title: "Region",
                                width: 100
                            }, {
                                field: "City",
                                title: "City",
                                width: 130
                            }, {
                                field: "State",
                                title: "State",
                                width: 200
                            },  {
                                field: "Country",
                                filterable: false
                            }
                        ]
                    });
                });
            </script>
        </div>

</body>
</html>

PHP:

- - -

$link = mysql_pconnect("127.0.0.1", "root", "admin") or die("Unable To Connect To Database Server");
mysql_select_db("MainDatabase") or die("Unable To Connect To Database");
$arr = array();
$rs = mysql_query("SELECT City, State, Region, Country FROM MainDatabase.Stations");
while($obj = mysql_fetch_object($rs)) {
    $arr[] = $obj;
}
// add the header line to specify that the content type is JSON
header("Content-type: application/json");
echo "{'"data'":" .json_encode($arr). "}";
?>

试试这个:

$(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            //type: "data",
                            transport: {
                                read: "http://localhost:8888/stationslist.php",
                                dataType: "json"
                            },
                            schema: {
                                 data: "data"
                            },
                            //pageSize: 30,
                            //serverPaging: true,
                            ...