自定义单元格如何保持显示与编辑状态样式一致

       SpreadJS中的自定义单元格作为SpreadJS中高阶的应用，本身是非常灵活的，但灵活程度与难度也是成正比的，善用自定义单元格的小伙伴能够做出很多非常炫酷超越Excel的表格效果，例如Datapicker，Autocomplete ，弹出框，多选等。但由于SpreadJS外部是用canvas渲染，进入编辑状态后编辑状态是dom结构组成。两者经常会遇到样式不一致的情况，并且在调整样式一致的时候由于canvas和dom的原理不同，很难调整成一致的显示。这会与精益求精的IT从业者来说是不可接受的。现在我们可以巧妙的利用svg的图片形式在完美的完成在html dom 与canvas中显示效果的转换。       例如下面例子，如果想要进入编辑状态的时候显示效果与外面canvas保持一致就要用到svg进行中间转换。

       首先，我们在createEditorElement中绘制了编辑状态的方框
      

1. ContinuousBoxCellType.prototype.createEditorElement = function () {
   
2.             var div = document.createElement("div");
   
3.             div.setAttribute("gcUIElement", "gcEditingInput");
   
4.             div.style.backgroundColor= "white";
   
5.             div.style.overflow= "hidden";
   
6.                         div.innerHTML = '<input style="margin-top:2px;display:block;float:left;height:10px;font-size:10px;line-height:10px;width:10px;text-align:center;margin-left:1px;border:1px solid #999"/>'
   
7.                                 + '<input style="margin-top:2px;display:block;float:left;height:10px;font-size:10px;line-height:10px;width:10px;text-align:center;margin-left:3px;border:1px solid #999"/>'
   
8.                                 + '<input style="margin-top:2px;display:block;float:left;height:10px;font-size:10px;line-height:10px;width:10px;text-align:center;margin-left:3px;border:1px solid #999"/>'
   
9.                                 + '<input style="margin-top:2px;display:block;float:left;height:10px;font-size:10px;line-height:10px;width:10px;text-align:center;margin-left:3px;border:1px solid #999"/>';
   
10.                         
    
11.                         return div;
    
12.         };

复制代码

         之后paint方法中将editor中的html转成svg，然后通过cavans的图片绘制将svg图片绘制在页面上

1. ContinuousBoxCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {
   
2.                         var DOMURL = window.URL || window.webkitURL || window;
   
3.                         var cell = context.sheet.getCell(context.row, context.col);
   
4.                         var img = cell.tag();
   
5.                         if (img) {
   
6.                                 try{
   
7.                                         ctx.save();
   
8.                                         ctx.rect(x, y, w, h);
   
9.                                         ctx.clip();
   
10.                                         ctx.drawImage(img, x + 2, y + 2)
    
11.                                         ctx.restore();
    
12.                                         cell.tag(null);
    
13.                                         return;
    
14.                                 } catch(err){
    
15.                                         GC.Spread.Sheets.CustomCellType.prototype.paint.apply(this, [ctx, "#HTMLError", x, y, w, h, style, context])
    
16.                                         cell.tag(null);
    
17.                                         return;
    
18.                                 }
    
19.                         }
    
20.                         var svgPattern = '<svg xmlns="http://www.w3.org/2000/svg" width="{0}" height="{1}">' +
    
21.                         '<foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="font:{2}">'+this.html+'</div></foreignObject></svg>';
    
22. 
    
23.                         var data = svgPattern.replace("{0}", w).replace("{1}", h).replace("{2}", style.font).replace("{3}", value.toString()[0]==null?"":value.toString()[0]).replace("{4}", value.toString()[1]==null?"":value.toString()[1]).replace("{5}", value.toString()[2]==null?"":value.toString()[2]).replace("{6}", value.toString()[3]==null?"":value.toString()[3]);
    
24.                         var doc = document.implementation.createHTMLDocument("");
    
25.                         doc.write(data);
    
26.                         // Get well-formed markup
    
27.                         data = (new XMLSerializer()).serializeToString(doc.body.children[0]);
    
28. 
    
29.                         img = new Image();
    
30.                         //var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
    
31.                         //var url = DOMURL.createObjectURL(svg);
    
32.                         //img.src = url;
    
33.                         img.src = 'data:image/svg+xml;base64,'+window.btoa(data);
    
34.                         cell.tag(img);
    
35.                         img.onload = function () {
    
36.                                 context.sheet.repaint(new GC.Spread.Sheets.Rect(x, y, w, h));
    
37.                         }
    
38.                         
    
39.         };

复制代码

这样就实现了编辑与展示一致的效果，详情可以见附件demo