重写autoFitColumn命令实现更改默认自适应机制的实现方法

收藏 · 2020-11-23 17:26 上传

注意，本例实现方案风险未知，仅做技术讨论和方案启发，请慎重采纳！
注意，本例实现方案风险未知，仅做技术讨论和方案启发，请慎重采纳！
注意，本例实现方案风险未知，仅做技术讨论和方案启发，请慎重采纳！

大家在使用Excel的时候，也许习惯了双击列头右侧边框来让列宽自适应内容宽度的操作。在SpreadJS中也支持这一操作，默认行为跟Excel是一致的。但神奇的地方在于，SpreadJS是支持列头内容自定义的，我们常常会遇到这样的情况：

image.png698027038.png

这就区别于Excel只支持A、B、C... 这样的列头内容，我们自然就希望能够让双击自适应的行为能够支持把列头宽度也一并计算，得出正确的结果。
比如上图中第4列，Audience Score %，当双击右侧边框时，不希望出现以下的情况：
image.png200821532.png

但SpreadJS对鼠标事件是做了封装的，没有提供接口来实现我们想要的效果。这时唯一的办法就是重写原本的autoFitColumn实现。
我们知道，SpreadJS的自适应列宽有一个方法和一个命令，实际上在Spread JS内部，autoFitColumn方法是直接调用了autoFitColumn命令的，所以这里只需要重写原命令即可。

代码不难，关键代码部分参考如下：

const originalAutoFitColumnCommand = GC.Spread.Sheets.Commands.autoFitColumn;
spread.commandManager().register("autoFitColumn",
{
canUndo: true,
execute: function (context, options, isUndo) {
var Commands = GC.Spread.Sheets.Commands;
// 在此加cmd名称
options.cmd = "autoFitColumn";

复制代码

思路很简单，就是先保存原autoFitColumn命令的逻辑，再覆盖原autoFitColumn的定义即可。通过修改命令的options.autoFitType 参数的值，来实现调用原命令时实现自适应带列头的宽度。

完整Demo参考附件。

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

重写autoFitColumn命令实现更改默认自适应机制的实现方法

0 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章