2

我目前正在开发一个项目，在该项目中我将 Spring MVC 与 Kendo UI jQuery 库（最新版本）结合使用。我遇到的问题是本地和远程更新剑道网格的数据源（剑道数据源）。我使用了数据源对象的同步和设置方法，但这些都不起作用。

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

顺便说一句....我正在使用最新版本的 Kendo-UI Web。

4

4 回答 4

3

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

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

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

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

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

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

于 2014-06-10T11:54:44.293 回答
1 
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();
});

上面的代码将一个额外的参数传递给您的 URL。

于 2013-08-30T14:52:54.343 回答
1

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

剑道音乐商店文档

剑道音乐商店源码（GitHub）

于 2014-06-10T12:07:11.243 回答
0

我正在使用 kendo-ui 2014.3.1119，这就是我为让 kendo-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);
            });
        }
    }
于 2015-01-07T23:19:56.013 回答