Question

我目前正在开发一个项目，我将Spring MVC与Kendo UI jquery库（最新版本）结合使用。我遇到的问题是本地内联（kendo数据源）以及远程更新kendo网格的数据源。我使用了数据源对象的synch和set方法，但这两种方法都不起作用。请参阅下面的jquery代码。

/*global $:false */

$(document).ready(function () {
"use strict";
var request;

$("#tabstrip").kendoTabStrip();



var applicationDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "/appinfo/findApplications",
            dataType: "json"
        },
        create: {
            url: "/appinfo/submit",
            dataType: "json",
            type: "POST"
        },
        update: {
            url: "/appinfo/updateApplication",
            dataType: "json",
            type: "POST"
        },
        destroy: {
            url: "/appinfo/deleteApplication",
            dataType: "json"
        },
        schema: {
            model: {
                id: "applicationId",
                fields: {
                    applicationId: {type: "number"},
                    applicationName: {type: "string"},
                    url: {type: "string"},
                    serverName: {type: "string"},
                    environmentName: {type: "string"},
                    ipAddress: {type: "string"},
                    genericUserName: {type: "string"},
                    genericPassword: {type: "string"}
                }
            }
        },
        parameterMap: function (options, operation) {
            if (operation !== "read" && options.models) {
                return {models: kendo.stringify(options.models)};
            }

            if (operation == "destroy" && options.models) {
                console.log("Delete worked");
                return { models: kendo.stringify(data.models) };
            }
        }
    },
    batch: true,
    pageSize: 10
});




var applicationGrid = $("#applicationsGrid").kendoGrid({
    dataSource: applicationDataSource,
    pageable: true,
    height: 600,
    scrollable: true,
    sortable: true,
    filterable: true,
    toolbar: [
        {name: "create", text: "Add New Application"}
    ],
    columnMenu: true,
    editable: {
        update: true,
        destroy: true,
        create: true,
        mode: "inline",
        confirmation: "Are you sure you want to delete this record?"
    },
    columns: [
        {field: "applicationName", title: "Application Name"},
        {field: "url", title: "URL"},
        {field: "serverName", title: "Server", editor: serverDropDownEditor, width: "300px"},
        {field: "environmentName", title: "Environment", editor: environmentDropDownEditor, width: "300px"},
        {field: "ipAddress", title: "Database", editor: databaseIpAddressDropDownEditor, width: "300px"},
        {field: "genericUserName", title: "Default Username"},
        {field: "genericPassword", title: "Default Password"},
        {title: "Modify", command: ["edit" , "destroy"]}
    ],
    edit: function (e) {           
        var dataItem = applicationDataSource.at(e.currentTarget);
        console.log("DataSource Count: " + applicationDataSource.total());
    },
    save: function (e) {
        var dataItem = applicationDataSource.at(e.currentTarget);          
        console.log("DataSource Count: " + applicationDataSource.total());
        console.log("The  model on save: " + e.model.applicationName);
        applicationDataSource.sync();
    },
    create: function (e) {
        console.log("Create this: " + e.values);
        applicationDataSource.insert(e.model);
        applicationDataSource.sync();
    },
    delete: function (e) {
        console.log("Delete this: " + e.model);
        applicationDataSource.remove(e.model);
    }
});


function serverDropDownEditor(container, options) {
    $('<input required data-text-field="serverName" data-value-field="serverId" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            optionLabel: " - Select - ",
            dataTextField: "serverName",
            dataValueField: "serverId",
            dataSource: {
                transport: {
                    read: {
                        url: "/appinfo/findServers",
                        dataType: "json"
                    }
                }
            }
        });
}

function environmentDropDownEditor(container, options) {
    $('<input required data-text-field="environmentName" data-value-field="environmentId" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            optionLabel: " - Select - ",
            dataTextField: "environmentName",
            dataValueField: "environmentId",
            dataSource: {
                transport: {
                    read: {
                        url: "/appinfo/findEnvironments",
                        dataType: "json"
                    }
                }
            }
        });
}

function databaseIpAddressDropDownEditor(container, options) {
    $('<input required data-text-field="ipAddress" data-value-field="databaseInfoId" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            optionLabel: " - Select - ",
            dataTextField: "ipAddress",
            dataValueField: "databaseInfoId",
            dataSource: {
                transport: {
                    read: {
                        url: "/appinfo/findDatabases",
                        dataType: "json"
                    }
                }
            }
        });
}


});

BTW ....我正在使用最新版本的Kendo-UI Web。

Answer 1

你并没有真正说出你的实际问题是什么，但我的猜测是它没有向服务器发出任何网络请求。我认为这是因为您在DataSource上启用了batch模式，因此它不会自动将更改发送到服务器，除非Grid告诉它，或者您手动调用.sync()

我发现您试图在.sync()和save事件处理程序中调用create，但您不需要这样做。单击“保存”按钮时，网格将同步数据源。但是，您没有“保存”按钮。通常你会在Grid的工具栏中添加一个：

toolbar: ["create", "save", "cancel"],

然后您将获得网格工具栏上的所有3个按钮。您可以对所有数据行进行编辑，然后单击“保存”，网格将为您调用DataSource上的.sync()。这也会触发save事件回调，但看起来你的回调没有做任何事情，只是将数据记录到控制台。您无需在事件回调中调用.sync()。

Grid : Batch Editing演示就像这样设置。

如果您希望在编辑，删除或创建行时将数据发送到服务器，则应将batch设置为false。然后，DataSource将不会等待更多（一批）更改，并将立即发送数据。

Answer 2

除了我在DataSource batch模式上的其他答案之外，我还看到您正在初始化3个下拉列表以用作编辑器。 Kendo Grid有一个内置的功能，称为ForeignKey Columns。他们的演示只显示了在下拉编辑器中使用的FK数据的同步加载，但我有一个在这里异步加载多个的例子：

Kendo Music Store Docs

Kendo Music Store Source (GitHub)

Answer 3

var dataSource = new kendo.data.DataSource({
            //define datasource parameters as per your requirement
        });
    var grid = jQuery("#grid").kendoGrid({
                        dataSource: dataSource,
});

jQuery('#changeevent').change(function()
         {
                 dataSource.read({
                    parametername:jQuery("#valueoffeild").val()
                 });

                 var grid = jQuery("#grid").data("kendoGrid")
             grid.refresh();
         });

以上代码将额外参数传递给您的网址。

Answer 4

我正在使用kendo-ui 2014.3.1119，这就是我使用ngndo-ui来利用ngResource Restful API所做的。

dataSource: {
    transport: {
        read: function (options) {
            RestService.query(function (result) {
                options.success(result);
            });
        },
        update: function (options) {
            RestService.update(options.data, function (result) {
                options.success(result);
            });
        },
        create: function (options) {
            RestService.save(options.data, function (result) {
                options.success(result);
            });
        }
    }

更新Kendo UI数据源

4 个答案: