请问如何实现类似wps的阅读模式

收藏

wps有个阅读模式，可以避免输入位置的失误，请问基于sp如何实现呢？特别是这种显示效果是不能被保存起来的，仅仅用于编辑时的展现而已。
目前sp没有找到任何相关api和例子，求思路或例子，谢谢。

Brander.Zhai · Brander.Zhai

可以试试这个：
https://demo.grapecity.com.cn/sp ... olumn-states/purejs
不仅可以支持全区域的阅读模式，也可以对指定区域开启阅读模式。

KevinChen · KevinChen

您好，目前sp不支持这种阅读辅助的功能，

您如果要自己实现，可以考虑使用自定义单元格类型来实现。

自定义单元格类型可以设置到全局中，并且在paint方法中可以通过设置style来更改绘制样式。

并且这个绘制的样式不会导出到Excel或者ssjson中。

示例代码：

// 重写Base类型
var CustomBase = spreadNS.CellTypes.Base;
var oldPaint = spreadNS.CellTypes.Base.prototype.paint;
CustomBase.prototype.paint = function (context, value, x1, y1, a1, b1, style, ctx) {
if (!context) {
return;
}
if(this.showEffect){
style.backColor = "red";
}
oldPaint.apply(this, [context, value, x1, y1, a1, b1, style, ctx]);
};
$(document).ready(function () {
// 创建空表单
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.setRowHeight(0, 60);
sheet.setColumnWidth(0, 150);
var myCellType = new spreadNS.CellTypes.Text();
// 设置参数为true时画圈，不设置或设置false时恢复
myCellType.showEffect = true;
// 将自定义单元格样式设置到全局
sheet.setCellType(-1,-1, myCellType);
sheet.resumePaint();
});

复制代码

jiqimao · jiqimao

使用自定义单元格类型是否会影响性能?

KevinChen · KevinChen

您好，

首先，要实现仅仅观察时单元格样式改变而不影响文档的保存，

只能通过自定义单元格类型的paint来实时绘制。

其次，paint方法影响的也只是当前用户观察到的区域，

因此性能上影响不大。

我这边按照这个思路做了一个完整的Demo，您可以引入您的工程中测试一下性能。

我先贴代码，完整的Demo在附件中：

var spreadNS = GC.Spread.Sheets;
var sels = [];
// 重写Base类型
var CustomBase = spreadNS.CellTypes.Base;
var oldPaint = spreadNS.CellTypes.Base.prototype.paint;
CustomBase.prototype.paint = function (context, value, x1, y1, a1, b1, style, ctx) {
if (!context) {
return;
}
if(this.showEffect){
if(sels && sels.length !== 0){
var row = ctx.row, col = ctx.col;
sels.forEach(function (sel) {
var rowSpan = sel.row + sel.rowCount;
var colSpan = sel.col + sel.colCount;
if(row >= sel.row && row < rowSpan
|| col >= sel.col && col < colSpan){
style.backColor = "red";
}
})
}
}
oldPaint.apply(this, [context, value, x1, y1, a1, b1, style, ctx]);
};
$(document).ready(function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = spread.getSheet(0);
sheet.suspendPaint();
sheet.setRowHeight(0, 60);
sheet.setColumnWidth(0, 150);
var myCellType = new spreadNS.CellTypes.Text();
myCellType.showEffect = true;
sheet.setCellType(-1,-1, myCellType);
sheet.resumePaint();
spread.bind(GC.Spread.Sheets.Events.SelectionChanged, function (s, e) {
sels = e.newSelections;
sheet.repaint();
});
});

复制代码

辉辉ZX · 辉辉ZX

本帖最后由辉辉ZX 于 2022-3-30 18:15 编辑

我用vue把这个做了之后发现除非刷新页面，否则上一次的会一直留下去= = 1648635263(1).png121121214.png

sumyy · sumyy

Brander.Zhai 发表于 2022-3-30 18:33
可以试试这个：
https://demo.grapecity.com.cn/sp ... olumn-states/purejs
不仅可以支持全区域的阅读模 ...

这个感觉是针对单表的，对于所有的表格都要实现的话应该怎么操作？

Clark.Pan · Clark.Pan

循环所有sheet进行同样设置即可。

JoestarXu · JoestarXu

sumyy 发表于 2023-5-17 14:35
这个感觉是针对单表的，对于所有的表格都要实现的话应该怎么操作？

您好，如果要对所有的表格都要实现可以直接获取所有的sheet，然后用循环应用上去。

sumyy · sumyy

JoestarXu 发表于 2023-5-17 14:45
您好，如果要对所有的表格都要实现可以直接获取所有的sheet，然后用循环应用上去。

谢谢，已经实现了，想问一下，如果已经设置了某些单元格的填充颜色，该如何实现颜色叠加或者显示填充色，而不是运用规则之后的颜色，意思相当于有颜色的要保留原来的颜色？请问可以实现嘛

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

[已处理] 请问如何实现类似wps的阅读模式

10 个回复

微信认证勋章

讲师达人

活字格认证

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证