Kendo UI for jQuery資料管理使用教程:Spreadsheet - 資料來源繫結

語言: CN / TW / HK

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 = "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中文網!