带有数据源的 PHP Kendo UI (CRUD)答案

【问题标题】：Php Kendo UI With datasource (CRUD)带有数据源的 PHP Kendo UI (CRUD)
【发布时间】：2014-08-28 07:53:14
【问题描述】：

我正在努力使用 Kendo UI 获得 CRUD 的功能？我的创建和更新选项似乎不起作用，但我的阅读确实有效，有帮助吗？我已经学习了很多教程，但就是无法正常工作。提前致谢。

这是我的代码，这是我的 Index.php 文件：

<!DOCTYPE html>
<html>
<head>

<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="styles/kendo.dataviz.default.min.css" rel="stylesheet" />

<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>

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

    $(document).ready(function () {
            dataSource = new kendo.data.DataSource({
                batch: true,
                transport: {

                    read: "data/ussd.php"
                },

                update: {
                    url: "data/ussd.php",
                    type: "POST"
                },
                create: {

                    url: "data/create.php",
                    type: "PUT"
                },
                parameterMap: function(options, operation){
                    if(operation !== "read" && option.models){
                        return{models : kendo.string(options.models)}
                    }
                },

                pageSize: 20,
                schema: {
                    data: "data",
                    model: {
                        id: "id",
                        fields: {
                             id: {editable: false, nullable: true},
                             msisdn: {editable: true, type: "number"},
                             company: {editable: true},
                             description: {editable: true},
                             ussd: {editable: true},
                             updated: {editable: true, type: "date"},
                             added: {editable: true, type: "date"}
                        }
                    }
                },

                serverFiltering: true,
                serverSorting: true

            });

        $("#grid").kendoGrid({
            dataSource:  dataSource,
            pageable: true,
            filterable: true,
            sortable: true,

            height: 500,
            toolbar: ["create", "save", "cancel"],
            columns: [

                { field: "id", title: "ID", width: "45px" },
                { field: "msisdn", title: "MSISDN", width: "75px" },
                { field: "company", title: "Company", width: "100px" },
                { field: "description", title:"Description", width: "100px" },
                { field: "ussd", title: "USSD", width: "100px" },
                { field: "updated", title: "Updated", width: "100px" },
                { field: "added", title: "Added", width: "100px" },
                { command: ["edit", "destroy"], title: "&nbsp;", width: "140px" }],

            schema: {
                model: { id: "id" }
            },

            editable: "inline",
            navigable: true
        });


    });



</script>
</div>
</body>
</html>

【问题讨论】：

您将batch 设置为true，这意味着在您调用Grid 对象中的saveChanges 之前，不会调用创建、更新和删除。您是否明确调用它？也尝试将batch 设置为false。
谢谢，让它以另一种方式工作。
你知道你可以回答你自己的问题吗？如果您认为您的解决方案是相关的，请执行此操作。否则删除问题，因为它不会帮助其他人。

标签： javascript php kendo-ui crud

【解决方案1】：

这是我改变的，基本上是 URL 和类型不正确，并且没有遵循正确的路径

$(document).ready(function () {

        dataSource = new kendo.data.DataSource({

            transport: {

                read: "data/whitelist.php?type=read",
                update: {url:"data/whitelist.php?type=update", type:"POST"},
                create: {url:"data/whitelist.php?=create",type:"POST"},
                destroy: {url:"data/whitelist.php?type=destroy",type:"POST"}
            },


            batch: false,
            pageSize: 20,
            schema: {

                model: {
                    id: "id",
                    fields: {
                        id: {editable: false, nullable: true},
                        msisdn: {editable: true, type: "number"},
                        company: {editable: true},
                        description: {editable: true},
                        ussd: {editable: true},
                        updated: {editable: true, type: "date"},
                        added: {editable: true, type: "date"}
                    }
                }
            },

            serverFiltering: true,
            serverSorting: true

        });

        $("#grid").kendoGrid({
            dataSource:  dataSource,
            pageable: true,
            filterable: true,
            sortable: true,

            height: 430,
            toolbar: [{name: "create", text: "Add New"}, "save", "cancel"],
            columns: [

                { field: "id", title: "ID", width: "26px" },
                { field: "msisdn", title: "MSISDN", width: "50px" },
                { field: "company", title: "Company", width: "65px" },
                { field: "description", title:"Description", width: "65px" },
                { field: "ussd", title: "USSD", width: "50px" },
                { field: "updated", title: "Updated", width: "70px" },
                { field: "added", title: "Added", width: "70px" },
                { command: [{text:"Edit", name:"edit"}, {text:"Delete",name:"destroy"}], title: " ", width: "80px" }],

            editable: "inline",
            navigable: true


        });
    });

【讨论】：

【解决方案2】：

{                    read: "data/ussd.php"
                },

                update: {
                    url: "data/ussd.php",
                    type: "POST"
                },
                create: {

                    url: "data/create.php",
                    type: "PUT"
                }

您的读取和更新都使用相同的 php 文件。

在 create 中输入 PUT 是什么？

只需将更新 url 更改为其他 php 文件并获取发布的值以在数据库中运行查询。并将创建的类型也更改为 POST，因为您也在为其他人使用 POST..

在更新部分更改此

url: "data/ussd.php",

到

url: "data/update.php",

并尝试像我之前所说的那样获取发布的值。看看是否适合你。

【讨论】：