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

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

Kendo UI Spreadsheet支持将单个工作表绑定到数据源实例，这使您可以快速将来自外部数据源的数据导入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%。

了解最新Kendo UI最新资讯，请关注Telerik中文网！