Kendo UI for jQuery数据管理使用教程:Spreadsheet - 支持图像

翻译|使用教程|编辑:龚雪|2021-07-20 10:46:02.173|阅读 48 次

概述:本文主要为大家讲解Kendo UI for jQuery中的Spreadsheet控件是如何支持图像的,欢迎下载最新版体验哦~

# 31款JAVA开发必备控件和工具 # 企业数字化建设合规无风险[专题]

相关链接:

Kendo UI for jQuery最新版工具下载

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

要将图像加载到工作表,请使用以下任一方法:

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

您可以使用Insert Image工具在Spreadsheet中上传和插入自定义图像。

Kendo UI for jQuery的Spreadsheet控件支持图像-图解1

然后在弹出窗口中,您可以从文件系统中选择或拖入文件。

Kendo UI for jQuery的Spreadsheet控件支持图像-图解2
配置Spreadsheet来初始化显示图像

1. 要正确配置Spreadsheet来在其工作表上显示图像,请将图像定义添加到Spreadsheet图像字段。在图像对象中,每个图像都应使用唯一键(属性名称)指定,并将图像URL作为值。图像 URL 可以是数据 URL(在这种情况下图像完全包含在定义中),也可以是外部 URL。

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

2. 参考该图像并使用相应图纸的绘图阵列将其相应放置。绘制定义必须包含:

* 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来显示 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公开了一种方法,该方法允许您以编程方式将图像添加到电子表格并将其放置在工作表上。

1. 创建一个新的kendo.spreadsheet.Drawing 对象,Drawing 对象的配置与上一节示例中描述的配置相同。

2. 将Drawing传递给 sheet.addDrawing()。

当您将Spreadsheet的导出功能与图像一起使用时,请注意以下事项:

  • 图像仅支持客户端导入和导出,当您进行服务器端导入或导出时,不会加载或导出任何图像。
  • 要使用默认的Spreadsheet功能将任何图像正确导出为PDF,包含该图像的工作表上必须至少存在一个包含数据的单元格。

<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组件库,可快速构建出色的高性能响应式Web应用程序。Kendo UI for jQuery提供在短时间内构建现在Web应用程序所需要的一切,从多个UI组件中选择,并轻松地将它们组合起来,创建出酷炫响应式的应用程序,同时将开发时间加快了50%。


了解最新Kendo UI最新资讯,请关注Telerik中文网!

慧都高端UI界面开发

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关产品
Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

Kendo UI for jQuery

完整的jQuery UI组件库,可快速构建出色的高性能响应式Web应用程序。

title
在线咨询
联系我们
TOP
在线客服系统
live chat