13.1.0 单元格设置背景图

收藏

var style = new GC.Spread.Sheets.Style();
style.backgroundImage = imgUrl;
style.backgroundImageLayout = GC.Spread.Sheets.ImageLayout.zoom;

activeSheet.setStyle(i, j,style);

给单元格设置背景图能否设置背景图的大小和在单元格的位置，比如显示在单元格右上角或者右侧，缩小展示

Lynn.Dou · Lynn.Dou

本帖最后由 Lynn.Dou 于 2021-6-23 16:48 编辑

您好，
使用 backgroundImage 给单元格设置背景图无法设置图片的大小和位置。
您测试下单元格按钮是否满足您的需求。
建议您先通过在线表格编辑器实际测试下：
如下图：
image.png241215514.png

结果如下图：

通过代码实现上述功能请参考学习指南：
https://demo.grapecity.com.cn/sp ... cell-buttons/purejs

miou · miou

var style = new GC.Spread.Sheets.Style();
style.cellButtons = [
{
useButtonStyle: false,
imageType: GC.Spread.Sheets.ButtonImageType.custom,
imageSrc: imgUrl,
imageSize: {
height: 15,
width: 15
},
enabled: false
}
];
activeSheet.setStyle(parseInt(i), parseInt(j),style);
var range = new GC.Spread.Sheets.Range(i,j,1,1);
activeSheet.cellStates.add(range,GC.Spread.Sheets.CellStatesType.readonly,style);
想设置单元格为只读，但是GC.Spread.Sheets.CellStatesType.readonly不起作用

Lynn.Dou · Lynn.Dou

如下图API所示，在保护表单中锁定单元格时，单元格状态为 "readonly" 。API链接：https://demo.grapecity.com.cn/sp ... tml#.CellStatesType

image.png855433654.png

设置单元格按钮所在的单元格只读，请参考以下代码：

var sheet = spread.getActiveSheet()
var style = new GC.Spread.Sheets.Style();
style.locked = true;
style.cellButtons = [
{
useButtonStyle: false,
imageType: GC.Spread.Sheets.ButtonImageType.custom,
imageSrc: "https://img0.baidu.com/it/u=3101694723,748884042&fm=26&fmt=auto&gp=0.jpg",
imageSize: {
height: 15,
width: 15
},
enabled: false
}
];
var defaultStyle = new GC.Spread.Sheets.Style();
defaultStyle.locked = false;
sheet.setDefaultStyle(defaultStyle, GC.Spread.Sheets.SheetArea.viewport);
sheet.setStyle(1,1,style);
sheet.options.isProtected = true;

复制代码

miou · miou

var style = new GC.Spread.Sheets.Style();
style.name = 'style1';
sheet.setStyle(row,col,style);
使用sheet.getStyle(row,col)获取到的style中name是空的。

activeSheet.addNamedStyle(style);
activeSheet.setStyleName(row,col,'style1');
使用sheet.getStyleName(row,col)也是获取到的空

怎样才能根据行列获取到单元格的样式名称？

Lynn.Dou · Lynn.Dou

如果想给一个样式命名，可以使用命名样式。
具体请参考学习指南：https://demo.grapecity.com.cn/sp ... /basic-style/purejs
image.png279706114.png

示例代码：

var style = new GC.Spread.Sheets.Style();
style.name = 'style1';
style.backColor = 'red';
//add to sheet's named style collection.
sheet.addNamedStyle(style);
sheet.setStyle(1,1,sheet.getNamedStyle('style1'))
sheet.getStyleName(1,1)

复制代码

相关API：
https://demo.grapecity.com.cn/sp ... .html#addNamedStyle
https://demo.grapecity.com.cn/sp ... t.html#getStyleName

miou · miou

保存之后，重新刷新页面再重新获取样式名称就是个空了

Lynn.Dou · Lynn.Dou

上述代码是将命名样式存储在当前的sheet中，
您检查下刷新页面后，获取到的sheet是否正确。

另外，命名样式也可以存储在spread中，可以应用于所有表单：
spread.addNamedStyle(style)；
在单元格中应用此样式和获取此样式代码同上。
您测试下讲命名样式添加在 spread ，看是否会出现此问题。

如果问题还未解决，请上传一个能复现此问题的demo，
并详细描述下复现步骤及您期待的效果，
这边实际测试下。

miou · miou

设置单元格样式为只读
var sheet = spread.getActiveSheet()
var style = new GC.Spread.Sheets.Style();
style.locked = true;
style.cellButtons = [
      {
            useButtonStyle: false,
            imageType: GC.Spread.Sheets.ButtonImageType.custom,
            imageSrc: "https://img0.baidu.com/it/u=3101694723,748884042&fm=26&fmt=auto&gp=0.jpg",
            imageSize: {
                     height: 15,
                     width: 15
            },
            enabled: false
      }
];
var defaultStyle = new GC.Spread.Sheets.Style();
defaultStyle.locked = false;
sheet.setDefaultStyle(defaultStyle, GC.Spread.Sheets.SheetArea.viewport);
sheet.setStyle(1,1,style);
sheet.options.isProtected = true;
然后操作别的单元格，再回来点击设置为只读的单元格，再点击事件上设置
style.bind(GC.Spread.Sheets.Events.CellClick, function (sender, args) {
if(!style.getNamedStyle("readOnly")){
style.options.isProtected = false;
}else if(style.getNamedStyle("readOnly") && style.options.isProtected == false){
style.options.isProtected = true;
}
});
为什么单元格上会显示出两个样式 image.png285083922.png

，点击其他可编辑的单元格，需要点击两次左边的一个只读图标会消失，再回来点击只读单元格，又会展示两个图标

目标：只显示一个图标即可

Lynn.Dou · Lynn.Dou

if(!style.getNamedStyle("readOnly"))
是在什么时候添加的nameStyle？请提供下完整的代码。
仅从上述描述无法复现此问题。

附件为模板demo，在demo中添加自己的代码。
并详细的描述操作步骤，以便这边快速复现此问题。

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

[已处理] 13.1.0 单元格设置背景图

16 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人