Kendo UI for jQuery最新版工具下載

Spreadsheet支持在其工作表中放置圖像。

要將圖像加載到工作表，請(qǐng)使用以下任一方法：

• 使用Spreadsheet工具欄上提供的插入圖像工具。
• 使用Spreadsheet的初始配置加載并指向小部件。
• 使用 sheet.addImage() API 方法。

使用插入圖像工具

您可以使用Insert Image工具在Spreadsheet中上傳和插入自定義圖像。

然后在彈出窗口中，您可以從文件系統(tǒng)中選擇或拖入文件。

配置Spreadsheet來(lái)初始化顯示圖像

1. 要正確配置Spreadsheet來(lái)在其工作表上顯示圖像，請(qǐng)將圖像定義添加到Spreadsheet圖像字段。在圖像對(duì)象中，每個(gè)圖像都應(yīng)使用唯一鍵（屬性名稱(chēng)）指定，并將圖像URL作為值。圖像 URL 可以是數(shù)據(jù) URL（在這種情況下圖像完全包含在定義中），也可以是外部 URL。

images: {
testImage: "../images/1.jpg"
}

2. 參考該圖像并使用相應(yīng)圖紙的繪圖陣列將其相應(yīng)放置。繪制定義必須包含：

* A pointer to the cell that will hold the top-left corner of the image: `topLeftCell: "J6"`.
* X and Y offset of the top-left corner: `offsetX: 30, offsetY: 10`.
* Dimensions of the rendered image: `width: 320, height: 220`.
* A pointer to the image key that is used in the `images` configuration of the Spreadsheet: `image: "testImage"`.

以下示例演示了如何配置Spreadsheet來(lái)顯示 J6 單元格中左上角的圖像。

<div id="spreadsheet"></div>

<script>
$("#spreadsheet").kendoSpreadsheet({
sheets: [{
drawings: [{
topLeftCell: "J6",
offsetX: 30,
offsetY: 10,
width: 320,
height: 220,
image: "testImage"
}]
}],
images: {
testImage: "../images/1.jpg"
}
})
</script>

使用 addImage() 方法

Spreadsheet Sheet API公開(kāi)了一種方法，該方法允許您以編程方式將圖像添加到電子表格并將其放置在工作表上。

1. 創(chuàng)建一個(gè)新的kendo.spreadsheet.Drawing 對(duì)象，Drawing 對(duì)象的配置與上一節(jié)示例中描述的配置相同。

2. 將Drawing傳遞給 sheet.addDrawing()。

當(dāng)您將Spreadsheet的導(dǎo)出功能與圖像一起使用時(shí)，請(qǐng)注意以下事項(xiàng)：

• 圖像僅支持客戶端導(dǎo)入和導(dǎo)出，當(dāng)您進(jìn)行服務(wù)器端導(dǎo)入或?qū)С鰰r(shí)，不會(huì)加載或?qū)С鋈魏螆D像。
• 要使用默認(rèn)的Spreadsheet功能將任何圖像正確導(dǎo)出為PDF，包含該圖像的工作表上必須至少存在一個(gè)包含數(shù)據(jù)的單元格。

<div id="spreadsheet"></div>

<script>
var spreadsheet = $("#spreadsheet").kendoSpreadsheet({
sheets: [{
drawings: [{
topLeftCell: "J6",
offsetX: 30,
offsetY: 10,
width: 320,
height: 220,
image: "testImage"
}]
}],
images: {
testImage: "../images/1.jpg"
}
}).data("kendoSpreadsheet");

var sheet = spreadsheet.activeSheet();

var drawing = kendo.spreadsheet.Drawing.fromJSON({
topLeftCell: "J6",
offsetX: 30,
offsetY: 10,
width: 320,
height: 220,
image: spreadsheet.addImage("../images/1.jpg")
});

sheet.addDrawing(drawing);
</script>

Kendo UI for jQuery | 下載試用

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