代码之家 › 专栏 › 技术社区 › dionysus

更新Kendo UI数据源

kendo-grid kendo-ui spring-mvc jquery

dionysus · 技术社区 · 12 年前

我目前正在做一个项目,在这个项目中,我将Spring MVC与Kendo UI jQuery库(最新版本)结合使用。我遇到的问题是本地和远程更新剑道网格内联的数据源(剑道数据源)。我使用了数据源对象的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"
                        }
                    }
                }
            });
    }
});

顺便说一句…我正在使用最新版本的剑道UI Web。

4 回复 | 直到 4 年前

CodingWithSpike 11 年前

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

我看到你想打电话 .sync() 在 save 和 create 事件处理程序,但您不需要这样做。单击“保存”按钮时,网格将同步数据源。但是,您没有“保存”按钮。通常情况下,您会在网格的工具栏中添加一个:

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

然后,您将获得网格工具栏上的所有3个按钮。您将对所有数据行进行编辑,然后单击“保存”,网格将调用 .sync() 在你的数据源上为你。这也将触发 拯救 事件回调,但看起来回调除了将数据记录到控制台之外什么都不做。你不需要打电话 .sync() 在事件回调中。

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

如果希望在编辑、删除或创建行时将数据发送到服务器,则应设置 一批 到 false 相反这样DataSource就不会等待更多(一批)更改,而是会立即发送数据。

CodingWithSpike 11 年前

除了我对DataSource的另一个回答 batch 模式下,我还看到您正在初始化3个下拉列表以用作编辑器。剑道网格有一个内置的功能,称为 ForeignKey Columns 。他们的演示只显示了要在下拉编辑器中使用的FK数据的同步加载,但我在这里有一个异步加载多个数据的示例:

Kendo Music Store Docs

Kendo Music Store Source (GitHub)

xXx 4 年前

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。

Henry Zou 11 年前

我使用的是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);
            });
        }
    }