数据绑定如何绑定图片

SpreadJS中，通过单元格背景图或浮动元素-图片，都可以用来给工作表中添加图片。区别是，背景图类似于在更底层的元素，不会遮挡单元格上的内容。而图片会浮动在单元格上边，会遮挡单元格上的内容。正常来说，浮动元素可以拉伸，移动。SpreadJS为了让浮动图片能够固定在单元格上，提供了startRow，endRow，startColumn，endColumn，allowMove等API的设置，具体可以搜索API文档详细查阅。
数据绑定可以将某个字段与单元格形成映射，用来快速的设置或获取数据。正常来说数据绑定只能用来绑定普通的数据内容。但随着文档内容的丰富，很多需求场景下都需要使用图片，并且需要快速获取图片地址或内容。这就需要数据绑定能实现图片的绑定与提取。本文结合自定义单元格与浮动图片及数据绑定，设计了一个包含图片绑定与提取的实现方案。

1. 模板设计
能看到这个文章的同学，一般来说对数据绑定都是有一定的了解程度的。如果还是不清楚数据绑定模板如何做，可以在论坛搜索或学习系列视频课程，在此我就不做过多的讲解。

上图为本教程设计的原始模板，G3单元格中绑定的字段会是一个图片的URL。

2. 自定义单元格

1. 
   
2. function ImageCellType(picType){
   
3.     this.typeName = "ImageCellType"
   
4.     this.picType = picType
   
5. }
   
6. ImageCellType.prototype = new GC.Spread.Sheets.CellTypes.Base()
   
7. ImageCellType.prototype.paint = function(ctx,value,x,y,w,h,style,options){
   
8.     GC.Spread.Sheets.CellTypes.Base.prototype.paint.call(this,ctx,value,x,y,w,h,style,options)
   
9.     let {sheet,row,col} = options
   
10.     if(sheet.getTag(row,col) !== 'painted' && value){
    
11.          console.log(value)
    
12.         if(!(sheet.pictures.get(this.picType))){
    
13.             let pic = sheet.pictures.add(this.picType,value,0,0,100,100)
    
14.             let span = sheet.getSpan(row,col)
    
15.             let rowCount = 1
    
16.             let colCount = 1
    
17.             if(span){
    
18.                 rowCount = span.rowCount
    
19.                 colCount = span.colCount
    
20.             }
    
21.             pic.startRow(row)
    
22.             pic.endRow(row+rowCount)
    
23.             pic.startColumn(col)
    
24.             pic.endColumn(col+colCount)
    
25.             pic.allowMove(false)
    
26.         }else{
    
27.             let pic = sheet.pictures.get(this.picType)
    
28.             pic.src(value)
    
29.         }
    
30.         sheet.setTag(row,col,'painted')
    
31.     }
    
32.    
    
33. }

复制代码

通过自定义单元格，在对应的单元格上根据值得信息添加对应得图片。这里需要注意得是，由于paint方法在做页面调整等操作时，都会被执行。因此需要结合单元格标签和value的信息，做好渲染判断，避免一些额外渲染逻辑，造成性能问题。

3. 更新图片
监听PictureSelectionChanged时间，当图片选中时，弹出替换图片的弹窗，输入需要使用的图片url，点击确认时替换图片的源信息，同时更新单元格的值。这样当调用数据绑定的api时，就可以准确的获取到图片的url信息。
完整的效果演示可以参考：数据绑定-图片单元格。

Demo完整的演示如下：


当然，实现绑定图片还有很多方式，本文只是提供一种实现思路，具体大家在做时，可以结合自己的实际业务情况，设计一个最适合自己的实现方案。

在自定义单元格的代码设计中，sheet.pictures类方法从15.2.0版开始,请改用"sheet.shapes"，API可以参考：https://demo.grapecity.com.cn/sp ... ion#addpictureshape