Kendo UI for jQuery最新版工具下載

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 = "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>

特定操作

數據源綁定將工作表切換到特殊的數據綁定模式，它在以下方面與標準操作不同：

• 從數據項字段推斷列標題，使用工作表setDataSource方法配置列標題和排序。
• 單元格樣式、公式和格式不會保留在數據源中。
• 行高和列寬不會保留在數據源中。
• 排序和過濾在本地應用。

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

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

不支持的場景

• 工作表不能綁定到不包含任何項目的源，因為工作表中的標題行是基于數據項字段生成的。
• 表格排序后無法編輯記錄（相關功能請求）。
• 過濾表格后無法編輯記錄（相關功能請求）。

Kendo UI for jQuery | 下載試用

Kendo UI for jQuery是完整的jQuery UI組件庫，可快速構建出色的高性能響應式Web應用程序。Kendo UI for jQuery提供在短時間內構建現在Web應用程序所需要的一切，從多個UI組件中選擇，并輕松地將它們組合起來，創建出酷炫響應式的應用程序，同時將開發時間加快了50%。