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

收藏

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

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

ContinuousBoxCellType.prototype.createEditorElement = function () {
var div = document.createElement("div");
div.setAttribute("gcUIElement", "gcEditingInput");
div.style.backgroundColor= "white";
div.style.overflow= "hidden";
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"/>'
+ '<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"/>'
+ '<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"/>'
+ '<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"/>';
return div;
};

复制代码

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

ContinuousBoxCellType.prototype.paint = function (ctx, value, x, y, w, h, style, context) {
var DOMURL = window.URL || window.webkitURL || window;
var cell = context.sheet.getCell(context.row, context.col);
var img = cell.tag();
if (img) {
try{
ctx.save();
ctx.rect(x, y, w, h);
ctx.clip();
ctx.drawImage(img, x + 2, y + 2)
ctx.restore();
cell.tag(null);
return;
} catch(err){
GC.Spread.Sheets.CustomCellType.prototype.paint.apply(this, [ctx, "#HTMLError", x, y, w, h, style, context])
cell.tag(null);
return;
}
}
var svgPattern = '<svg xmlns="http://www.w3.org/2000/svg" width="{0}" height="{1}">' +
'<foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="font:{2}">'+this.html+'</div></foreignObject></svg>';
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]);
var doc = document.implementation.createHTMLDocument("");
doc.write(data);
// Get well-formed markup
data = (new XMLSerializer()).serializeToString(doc.body.children[0]);
img = new Image();
//var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
//var url = DOMURL.createObjectURL(svg);
//img.src = url;
img.src = 'data:image/svg+xml;base64,'+window.btoa(data);
cell.tag(img);
img.onload = function () {
context.sheet.repaint(new GC.Spread.Sheets.Rect(x, y, w, h));
}
};

复制代码

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

		自动登录	找回密码
密码			立即注册

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

0 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄