【15.1.0】如何修改表格部分默认样式

Richard.Ma

目前通过“@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css”文件，查询到了部分默认样式，通过覆盖样式修改了一些，但是有一些样式如何修改并没有在文档和这个文件里面找到，请问如何修改，需求如下：

1. 点击表头选中一整列的时候单元格默认的这个灰色底色如何修改？
image.png424846496.png

2. 自定义单元格，侧边按钮是否支持样式修改？我需要将这个按钮向左移动一定距离，看起来不是那么顶边

image.png739931640.png

3. 按钮单元格，是否支持按钮文字点击变色？
image.png863560790.png

Richard.Ma · Richard.Ma

你用是自定义cellButtons 的做法，这个目前没有办法设置你说的“距离右侧的距离”，只能设置停靠在哪一侧

具体到你的需求，建议可以给你现在定义的这个cellbutton右边再加一个空的cellbutton，通过控制这个空的cellbutton的宽度，就能调整左侧这个cellbutton的位置了

在你的代码上修改如下

import GC from '@grapecity/spread-sheets'
import { cloneDeep } from 'lodash-es'
import searchHelpIconUrl from '@/assets/search-helper.png'
/**
* @returns {GC.Spread.Sheets.Style}
*/
const getSearchHelpCellStyle = () => {
const btnCellStyle = new GC.Spread.Sheets.Style()
btnCellStyle.cellButtons = [
{
buttonBackColor: 'transparent',
hoverBackColor: 'transparent',
imageSize: {
height: 16,
width: 16,
},
imageSrc: searchHelpIconUrl,
imageType: GC.Spread.Sheets.ButtonImageType.custom,
command: (sheet, row, col) => {
// do sth
},
},<blockquote> {

复制代码

Richard.Ma · Richard.Ma

本帖最后由 Richard.Ma 于 2022-11-14 10:10 编辑

1.选中区域的背景色（半透明层）

.gc-selection {
background-color: rgba(200, 20, 20, 0.2);
border-color: #217346;
color: rgba(240, 240, 240, 0.7);
}

复制代码

2. 我看到你说这个是你自定义的单元格，那添加元素时位置你应该是可以控制的。可以上传一个demo上来重现一下你目前自定义的单元格。我帮你看怎么调整

3.超链接单元格点击后的颜色，可以通过下面的代码设置

h.visitedLinkColor('blue');

复制代码

reslicma · reslicma

本帖最后由 reslicma 于 2022-11-14 10:08 编辑

Richard.Ma 发表于 2022-11-11 12:30
1.选中区域的背景色（半透明层）

这个自定义单元格，我主要是更改了自定义按钮和自定义按钮的功能，代码如下，看看能否做到让这个按钮在这个单元格内调整一下距离右侧的距离。

import GC from '@grapecity/spread-sheets'
import { cloneDeep } from 'lodash-es'
import searchHelpIconUrl from '@/assets/search-helper.png'
/**
* @returns {GC.Spread.Sheets.Style}
*/
const getSearchHelpCellStyle = () => {
const btnCellStyle = new GC.Spread.Sheets.Style()
btnCellStyle.cellButtons = [
{
buttonBackColor: 'transparent',
hoverBackColor: 'transparent',
imageSize: {
height: 16,
width: 16,
},
imageSrc: searchHelpIconUrl,
imageType: GC.Spread.Sheets.ButtonImageType.custom,
command: (sheet, row, col) => {
// do sth
},
},
]
return btnCellStyle
}
export { getSearchHelpCellStyle }

复制代码

reslicma · reslicma

Richard.Ma 发表于 2022-11-14 14:11
你用是自定义cellButtons 的做法，这个目前没有办法设置你说的“距离右侧的距离”，只能设置停靠在哪一侧
...

按照这个方案，已经可以实现了，多谢

Richard.Ma · Richard.Ma

不客气

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

[已处理] 【15.1.0】如何修改表格部分默认样式

最佳答案

5 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人