Kendo UI for jQuery数据管理使用教程：Spreadsheet – 数据源绑定

Spreadsheet DataSource使用读取和提交传输选项，需要提交选项才能正确处理用户同时创建、更新和删除项目的场景。

当使用单独的创建、更新和销毁处理程序时，其中一个可能会失败，而其他不会，这将导致客户端（Spreadsheet）和远程源之间的数据状态不匹配。提交选项处理单个请求中的所有操作，如果任何项目无效，它将不会保存任何更改。

以下示例演示如何配置Spreadsheet来使用数据源。

<button class="k-button" id="save">Save changes</button><button class="k-button" id="cancel">Cancel changes</button><div id="spreadsheet" style="width: 100%"></div><script>$(function() {var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service";var dataSource = new kendo.data.DataSource({transport: {read: onRead,submit: onSubmit},batch: true,change: function() {$("#cancel, #save").toggleClass("k-state-disabled", !this.hasChanges());},schema: {model: {id: "ProductID",fields: {ProductID: { type: "number" },ProductName: { type: "string" },UnitPrice: { type: "number" },Discontinued: { type: "boolean" },UnitsInStock: { type: "number" }}}}});$("#spreadsheet").kendoSpreadsheet({columns: 20,rows: 100,toolbar: false,sheetsbar: false,sheets: [{name: "Products",dataSource: dataSource,rows: [{height: 40,cells: [{bold: "true",background: "#9c27b0",textAlign: "center",color: "white"},{bold: "true",background: "#9c27b0",textAlign: "center",color: "white"},{bold: "true",background: "#9c27b0",textAlign: "center",color: "white"},{bold: "true",background: "#9c27b0",textAlign: "center",color: "white"},{bold: "true",background: "#9c27b0",textAlign: "center",color: "white"}]}],columns: [{ width: 100 },{ width: 415 },{ width: 145 },{ width: 145 },{ width: 145 }]}]});function onSubmit(e) {$.ajax({url: crudServiceBaseUrl + "/Products/Submit",data: { models: kendo.stringify(e.data) },contentType: "application/json",dataType: "jsonp",success: function (result) {e.success(result.Updated, "update");e.success(result.Created, "create");e.success(result.Destroyed, "destroy");},error: function (xhr, httpStatusMessage, customErrorMessage) {alert(xhr.responseText);}});}function onRead(options) {$.ajax({url: crudServiceBaseUrl + "/Products",dataType: "jsonp",success: function (result) {options.success(result);},error: function (result) {options.error(result);}});}$("#save").click(function() {if (!$(this).hasClass("k-state-disabled")) {dataSource.sync();}});$("#cancel").click(function() {if (!$(this).hasClass("k-state-disabled")) {dataSource.cancelChanges();}});});</script>

特定操作

数据源绑定将工作表切换到特殊的数据绑定模式，它在以下方面与标准操作不同：

• 从数据项字段推断列标题，使用工作表setDataSource方法配置列标题和排序。
• 单元格样式、公式和格式不会保留在数据源中。
• 行高和列宽不会保留在数据源中。
• 排序和过滤在本地应用。

CRUD操作也以特定方式处理：

• 无论实际的行索引如何，插入的行总是附加在末尾。
• 更新单元格内容转化为更新操作。
• 删除行转化为销毁操作。
• 不支持插入和删除列。

不支持的场景

• 工作表不能绑定到不包含任何项目的源，因为工作表中的标题行是基于数据项字段生成的。

Kendo UI for jQuery | 下载试用

Kendo UI for jQuery是完整的jQuery UI组件库，可快速构建出色的高性能响应式Web应用程序。Kendo UI for jQuery提供在短时间内构建现在Web应用程序所需要的一切，从多个UI组件中选择，并轻松地将它们组合起来，创建出酷炫响应式的应用程序，同时将开发时间加快了50%。