Question

我开始使用Kendo UI可编辑网格，但我想设置自己的数据源来自php脚本，它回显一系列对象（从原始Kendo UI数据源复制/粘贴）。网格上没有任何东西。这是我的html文件的内容。 `回来

        <div id="example">
        <div id="grid"></div>

        <script>
            $(document).ready(function () {
                var crudServiceBaseUrl = "http://localhost/telererik-kendoui",
                    dataSource = new kendo.data.DataSource({
                        transport: {
                            read:  {
                                 url: "../../datasource.php",
                                dataType: "json",
                                type:"GET",
                                contentType: "application/json; charset=utf-8",
                               cache: false 
                            },
                           /* update: {
                                url: crudServiceBaseUrl + "/Products/Update",
                                dataType: "jsonp"
                            },
                            destroy: {
                                url: crudServiceBaseUrl + "/Products/Destroy",
                                dataType: "jsonp"
                            },
                            create: {
                                url: crudServiceBaseUrl + "/Products/Create",
                                dataType: "jsonp"
                            },*/
                            parameterMap: function(options, operation) {
                                if (operation !== "read" && options.models) {
                                    return {models: kendo.stringify(options.models)};
                                }
                            }
                        },
                        batch: true,
                        pageSize: 20,
                        schema: {
                            model: {
                                id: "ProductID",
                                fields: {
                                    ProductID: { editable: false, nullable: true },
                                    ProductName: { validation: { required: true } },
                                    UnitPrice: { type: "number", validation: { required: true, min: 1} },
                                    Discontinued: { type: "boolean" },
                                    UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                                }
                            }
                        }
                    });

                $("#grid").kendoGrid({
                    dataSource: dataSource,
                    navigatable: true,
                    pageable: true,
                    height: 550,
                    toolbar: ["create", "save", "cancel"],
                    columns: [
                        "ProductName",
                        { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
                        { field: "UnitsInStock", title: "Units In Stock", width: 120 },
                        { field: "Discontinued", width: 120 },
                        { command: "destroy", title: "&nbsp;", width: 120 }],
                    editable: true
                });
            });
        </script>
    </div>`

我的datasource.php文件的内容如下 <?php echo "[{'ProductID':1,'ProductName':'Chai','UnitPrice':18,'UnitsInStock':39,'Discontinued':false},{'ProductID':2,'ProductName':'Chang','UnitPrice':19,'UnitsInStock':17,'Discontinued':false},{'ProductID':3,'ProductName':'Aniseed Syrup','UnitPrice':10,'UnitsInStock':13,'Discontinued':false}]"?> 对此有何帮助？

Answer 1

我不是真的很熟悉php，但是你在php文件中的数据我已经为你做了一个演示。

将dataSource作为一个函数调用，这样你就可以更灵活地为你得到的结果做任何事情。

 read: function (options) {

                var result=[{'ProductID':1,'ProductName':'Chai','UnitPrice':18,'UnitsInStock':39,'Discontinued':false},{'ProductID':2,'ProductName':'Chang','UnitPrice':19,'UnitsInStock':17,'Discontinued':false},{'ProductID':3,'ProductName':'Aniseed Syrup','UnitPrice':10,'UnitsInStock':13,'Discontinued':false}]


                options.success(result);
}

http://jsfiddle.net/chanaka1/ank22b0n/

你可以在这里查看kendo文档，了解如何从php文件返回json：http://docs.telerik.com/kendo-ui/php/widgets/combobox/remote-binding#create-php-file-which-returns-json

Kendo UI /从ajax调用设置数据源

1 个答案: