Kendo UI for jQuery最新版工具下載

Kendo UI Spreadsheet支持將單個(gè)工作表綁定到數(shù)據(jù)源實(shí)例，這使您可以快速將來自外部數(shù)據(jù)源的數(shù)據(jù)導(dǎo)入Spreadsheet并進(jìn)行編輯。

Spreadsheet DataSource使用讀取和提交傳輸選項(xiàng)，需要提交選項(xiàng)才能正確處理用戶同時(shí)創(chuàng)建、更新和刪除項(xiàng)目的場景。

當(dāng)使用單獨(dú)的創(chuàng)建、更新和銷毀處理程序時(shí)，其中一個(gè)可能會(huì)失敗，而其他不會(huì)，這將導(dǎo)致客戶端（Spreadsheet）和遠(yuǎn)程源之間的數(shù)據(jù)狀態(tài)不匹配。提交選項(xiàng)處理單個(gè)請(qǐng)求中的所有操作，如果任何項(xiàng)目無效，它將不會(huì)保存任何更改。

以下示例演示如何配置Spreadsheet來使用數(shù)據(jù)源。

<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 = "http://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>

特定操作

數(shù)據(jù)源綁定將工作表切換到特殊的數(shù)據(jù)綁定模式，它在以下方面與標(biāo)準(zhǔn)操作不同：

• 從數(shù)據(jù)項(xiàng)字段推斷列標(biāo)題，使用工作表setDataSource方法配置列標(biāo)題和排序。
• 單元格樣式、公式和格式不會(huì)保留在數(shù)據(jù)源中。
• 行高和列寬不會(huì)保留在數(shù)據(jù)源中。
• 排序和過濾在本地應(yīng)用。

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

• 無論實(shí)際的行索引如何，插入的行總是附加在末尾。
• 更新單元格內(nèi)容轉(zhuǎn)化為更新操作。
• 刪除行轉(zhuǎn)化為銷毀操作。
• 不支持插入和刪除列。

不支持的場景

• 工作表不能綁定到不包含任何項(xiàng)目的源，因?yàn)楣ぷ鞅碇械臉?biāo)題行是基于數(shù)據(jù)項(xiàng)字段生成的。
• 表格排序后無法編輯記錄（相關(guān)功能請(qǐng)求）。
• 過濾表格后無法編輯記錄（相關(guān)功能請(qǐng)求）。

Kendo UI for jQuery | 下載試用

Kendo UI for jQuery是完整的jQuery UI組件庫，可快速構(gòu)建出色的高性能響應(yīng)式Web應(yīng)用程序。Kendo UI for jQuery提供在短時(shí)間內(nèi)構(gòu)建現(xiàn)在Web應(yīng)用程序所需要的一切，從多個(gè)UI組件中選擇，并輕松地將它們組合起來，創(chuàng)建出酷炫響應(yīng)式的應(yīng)用程序，同時(shí)將開發(fā)時(shí)間加快了50%。