自定义单元格实现类ElementUI超链接

收藏

SpreadJS对标类Excel文档操作,因此UI显示上也是更多的向Excel靠近.但很多用户项目中用了一些前端开源的UI库,例如ElementUI,antd等等.因此希望spreadjs的UI风格也能更多的靠近其它UI组件.但我们想要将一款产品改成另外一款产品,必然是有一定难度.spreadjs虽然不建议用户这么使用,但是也留了一写自定义的开口.

本文以实现ElementUI中超链接为目标,来讲解如何实现一个自定义单元格.自定义单元格写法需要借助原生的js继承机制,用惯了框架的用户可能不太容易理解,这导致用户在实现自定义单元格时总是一头雾水.但其实只要我们理解实现原理,自定义单元格其实很简单,主要的步骤如下:

1. 定义一个单元格类型,选择继承一种spreadjs内置的单元格类型

function HyperLinkCellType(){
// 自定义一个单元格类型
this._width = 0;
}
HyperLinkCellType.prototype = new GC.Spread.Sheets.CellTypes.Text()

复制代码

我们可以将一些内置的属性定义在function内部,然后将函数的原型指向我们选中的单元格类型.接下来,我们可以在api中搜索继承的单元格类型上有哪些默认的方法,以Text单元格类型为例,它具备的方法如下:
image.png146529845.png

2. 重写与我们想象不一致的方法
并不是每个方法我们都需要重写,只需要重写行为与我们最终效果不一致的一些方法,当前需求我们需要改写的方法主要有三个,第一个是paint方法,paint方法其实就是单元格类型的展示形式,方法内部大部分也都是采用canvas来控制.

HyperLinkCellType.prototype.paint = function(ctx, value, x, y, w, h, style, context){
// 默认修改单元格对齐方式
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
this._width = w
// 继承原逻辑
GC.Spread.Sheets.CellTypes.Text.prototype.paint.call(this, ctx, value, x , y, w, h, style,context)
}

复制代码

除了展示的不同之外,在鼠标移动时文字颜色和鼠标相撞在进入单元格之后,也需要一定的变化,因此我们就需要重写鼠标相关的事件,如下:

// 处理指针形状及变色
HyperLinkCellType.prototype.processMouseMove = function (hitInfo) {
var {sheet,row,col} = hitInfo;
sheet.getCell(row,col).foreColor('#66b1ff')
var div = sheet.getParent().getHost();
var canvasId = div.id + "vp_vp";
var canvas = document.getElementById(canvasId);
if (sheet && hitInfo.isReservedLocation) {
canvas.style.cursor = 'pointer';
return true;
} else {
canvas.style.cursor = 'default';
}
return false;
}
HyperLinkCellType.prototype.processMouseUp = function (hitInfo) {
var sheet = hitInfo.sheet;
if (sheet && hitInfo.isReservedLocation) {
var {row,col} = hitInfo;
// 在这里可以做一些操作,例如删除数据，修改数据等等
console.log(row,col)
return true;
}
return false;
};
HyperLinkCellType.prototype.processMouseLeave = function(hitInfo){
var sheet = hitInfo.sheet;
if (sheet && hitInfo.isReservedLocation) {
var {row,col} = hitInfo
// 变一个文字颜色
sheet.getCell(row,col).foreColor('#409eff')
return true;
}
return false;
}

复制代码

经过上边几步操作,就完成了一个类ElementUI超链接形式的自定义单元格了.
详细的实现方法和显示效果可以点击这里了解.

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

自定义单元格实现类ElementUI超链接

0 个回复