jQuery 更新 Kendo UI 数据源
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18534223/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Update Kendo UI Datasource
提问by dionysus
I'm currently working on a project in which I am using Spring MVC in conjunction with the Kendo UI jquery library (the latest version). The problem that I am having is updating the datasource of the kendo grid inline locally(kendo datasource) as well as remotely. I used the synch and set methods of the datasource object but neither of these worked. Please see my jquery code below.
我目前正在开发一个项目，在该项目中我将 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"
}
}
}
});
}
});
BTW.... I am using the latest version of Kendo-UI Web.
顺便说一句......我正在使用最新版本的Kendo-UI Web。
回答by CodingWithSpike
You don't really say what your actual problem is, but my guess is that it isn't making any network requests to the server.
I think this is because you have batchmode enabled on the DataSource, so it isn't going to automatically send changes to the server unless either the Grid tells it to, or you manually call .sync()
您并没有真正说出您的实际问题是什么，但我的猜测是它没有向服务器发出任何网络请求。我认为这是因为您batch在 DataSource 上启用了模式，所以它不会自动将更改发送到服务器，除非网格告诉它，或者您手动调用.sync()
I see you are trying to call .sync()in the saveand createevent handlers, but you don't need to do that. The grid will sync the datasource when the Save button is clicked. However, you don't have a Save button. Normally you would add one to the Grid's toolbar:
我看到你正在试图调用.sync()在save和create事件处理程序，但你并不需要做的。单击“保存”按钮时，网格将同步数据源。但是，您没有保存按钮。通常你会在 Grid 的工具栏中添加一个：
toolbar: ["create", "save", "cancel"],
Then you will get all 3 buttons on the grid toolbar. You would make your edits to all your data rows, then click "Save", and the grid will call .sync()on your DataSource for you. This will also trigger the saveevent callback, but it doesn't look like your callback is doing anything but logging the data to the console. You don't need to call .sync()in the event callbacks.
然后您将获得网格工具栏上的所有 3 个按钮。您将对所有数据行进行编辑，然后单击“保存”，网格将为.sync()您调用数据源。这也将触发save事件回调，但看起来您的回调除了将数据记录到控制台之外并没有做任何事情。您不需要调用.sync()事件回调。
The Grid : Batch Editingdemo is set up like this as an example.
该网格：批量编辑演示设置这样作为一个例子。
If you are expecting data to be sent to the server the moment that you edit, delete, or create a row, then you should set batchto falseinstead. Then the DataSource won't wait for more (a batch) of changes, and will immediately send the data.
如果您希望在编辑、删除或创建行时将数据发送到服务器，那么您应该改为设置batch为false。然后 DataSource 不会等待更多（一批）更改，而是立即发送数据。
回答by CodingWithSpike
In addition to my other answer on DataSource batchmode, I also see that you are initializing 3 dropdown lists to use as editors. The Kendo Grid has a built-in feature for doing this, called ForeignKey Columns. Their demo only shows a synchronous load of the FK data to use in a dropdown editor, but I have an example that loads multiple asynchronously here:
除了我关于 DataSourcebatch模式的其他答案之外，我还看到您正在初始化 3 个下拉列表以用作编辑器。Kendo Grid 具有用于执行此操作的内置功能，称为ForeignKey Columns。他们的演示只显示了在下拉编辑器中使用的 FK 数据的同步加载，但我有一个在这里异步加载多个的示例：
回答by Shivam
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();
});
Above code pass extra parameter to your url.
上面的代码将额外的参数传递给您的 url。
回答by Henry Zou
I am using kendo-ui 2014.3.1119 and this is what I did to get kendo-ui to leverage ngResource Restful API.
我正在使用 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);
});
}
}
