Question

我试图通过引入我自己的数据来模仿这个示例（http://demos.kendoui.com/web/grid/column-menu.html），但是当我运行页面时，它会在每列中显示“未定义”。

当我在浏览器中输入数据源链接时，它会从表中提供所有数据。不知道我在这里做错了什么。

代码：

<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). "}";

?>

Answer 1

试试这个：

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

                            ...

Kendo UI填充网格

1 个答案: