数据绑定如何绑定图片
本帖最后由 Winny 于 2022-9-29 17:26 编辑SpreadJS中，通过单元格背景图或浮动元素-图片，都可以用来给工作表中添加图片。区别是，背景图类似于在更底层的元素，不会遮挡单元格上的内容。而图片会浮动在单元格上边，会遮挡单元格上的内容。正常来说，浮动元素可以拉伸，移动。SpreadJS为了让浮动图片能够固定在单元格上，提供了startRow，endRow，startColumn，endColumn，allowMove等API的设置，具体可以搜索API文档详细查阅。
数据绑定可以将某个字段与单元格形成映射，用来快速的设置或获取数据。正常来说数据绑定只能用来绑定普通的数据内容。但随着文档内容的丰富，很多需求场景下都需要使用图片，并且需要快速获取图片地址或内容。这就需要数据绑定能实现图片的绑定与提取。本文结合自定义单元格与浮动图片及数据绑定，设计了一个包含图片绑定与提取的实现方案。
1. 模板设计
能看到这个文章的同学，一般来说对数据绑定都是有一定的了解程度的。如果还是不清楚数据绑定模板如何做，可以在论坛搜索或学习系列视频课程，在此我就不做过多的讲解。
上图为本教程设计的原始模板，G3单元格中绑定的字段会是一个图片的URL。
2. 自定义单元格
function ImageCellType(picType){
this.typeName = "ImageCellType"
this.picType = picType
}
ImageCellType.prototype = new GC.Spread.Sheets.CellTypes.Base()
ImageCellType.prototype.paint = function(ctx,value,x,y,w,h,style,options){
GC.Spread.Sheets.CellTypes.Base.prototype.paint.call(this,ctx,value,x,y,w,h,style,options)
let {sheet,row,col} = options
if(sheet.getTag(row,col) !== 'painted' && value){
console.log(value)
if(!(sheet.pictures.get(this.picType))){
let pic = sheet.pictures.add(this.picType,value,0,0,100,100)
let span = sheet.getSpan(row,col)
let rowCount = 1
let colCount = 1
if(span){
rowCount = span.rowCount
colCount = span.colCount
}
pic.startRow(row)
pic.endRow(row+rowCount)
pic.startColumn(col)
pic.endColumn(col+colCount)
pic.allowMove(false)
}else{
let pic = sheet.pictures.get(this.picType)
pic.src(value)
}
sheet.setTag(row,col,'painted')
}
}通过自定义单元格，在对应的单元格上根据值得信息添加对应得图片。这里需要注意得是，由于paint方法在做页面调整等操作时，都会被执行。因此需要结合单元格标签和value的信息，做好渲染判断，避免一些额外渲染逻辑，造成性能问题。
3. 更新图片
监听PictureSelectionChanged时间，当图片选中时，弹出替换图片的弹窗，输入需要使用的图片url，点击确认时替换图片的源信息，同时更新单元格的值。这样当调用数据绑定的api时，就可以准确的获取到图片的url信息。
完整的效果演示可以参考：数据绑定-图片单元格。
Demo完整的演示如下：
当然，实现绑定图片还有很多方式，本文只是提供一种实现思路，具体大家在做时，可以结合自己的实际业务情况，设计一个最适合自己的实现方案。
在自定义单元格的代码设计中，sheet.pictures类方法从15.2.0版开始,请改用"sheet.shapes"，API可以参考：https://demo.grapecity.com.cn/spreadjs/help/api/classes/GC.Spread.Sheets.Shapes.ShapeCollection#addpictureshape
页:
[1]