spread 半透明凹凸金属感设置

收藏

1：我试着在gc-columnHeader-normal里面写css，正常情况下，会显示有金属的凹凸感，但是运行spreadjs的table，不起作用。2：我希望表格是半透明的，能透出整个画面背景的颜色，但是试了一下似乎不行。我用的rgba的颜色模式。

KevinChen · KevinChen

您好，您是希望自己定制整个SpreadJS的样式吗？

SpreadJS的样式都是由canvas绘制出来的，并非采用css技术渲染的，所以您更改css是没有效果的，

背景透明可以实现，您可以访问学习指南：

https://demo.grapecity.com.cn/Sp ... os/spreadBackground

设置灰色区域和表格区域为transparent后，即可显示出背景色，

当设置为rgb(45,45,45,0.5)这样的半透明色，即可实现半透明效果。

image.png994048156.png

红衣 · 红衣

那比如表头平常的html用css的boxshadow画出凹凸感，那spread里面，怎么写？有类似的.css()方法吗？
因为我改gc-columnHeader-normal里面的background的颜色，是起作用的，是不是要特定的语法或者属性？

KevinChen · KevinChen

您好，SpreadJS有修改表头样式的接口，抱歉昨天我理解错误了，

您可以参考学习指南的Demo来了解：

https://demo.grapecity.com.cn/Sp ... demos/externalTheme

红衣 · 红衣

KevinChen 发表于 2019-1-3 11:58
您好，SpreadJS有修改表头样式的接口，抱歉昨天我理解错误了，

您可以参考学习指南的Demo来了解：

还有如何改变下拉框的颜色，下拉子菜单的颜色，子菜单hover的颜色？文档里没找到修改的方式。还有checkbox的颜色。

KevinChen · KevinChen

红衣发表于 2019-1-3 15:41
还有如何改变下拉框的颜色，下拉子菜单的颜色，子菜单hover的颜色？文档里没找到修改的方式。还有checkbo ...

您说的这些都是里面组件的默认设置，只能通过重写paint的方法来更改一部分组件的样式，可以参考学习指南：

https://demo.grapecity.com.cn/Sp ... emos/customCellType

红衣 · 红衣

本帖最后由红衣于 2019-1-4 11:07 编辑

KevinChen 发表于 2019-1-3 18:12
您说的这些都是里面组件的默认设置，只能通过重写paint的方法来更改一部分组件的样式，可以参考学习指南 ...

没有学过canvas，然后学习指南代码也没有注释，自己不是很理解。

KevinChen · KevinChen

红衣发表于 2019-1-4 11:06
没有学过canvas，然后学习指南代码也没有注释，自己不是很理解。

您要把整个spreadjs的界面都要自定制吗？

是否可以描述一下您的应用场景，您可以把您的需求场景描述的有说服力一些，

我会与研发部门沟通，看是否能在未来的产品中加入一些接口让您快捷地实现这些功能。

或者看是否有更好的思路来实现您的需求。

红衣 · 红衣

KevinChen 发表于 2019-1-4 12:21
您要把整个spreadjs的界面都要自定制吗？

是否可以描述一下您的应用场景，您可以把您的需求场景描述的 ...

1：整个table是透明或者半透明的，背景色就是整个html的渐变背景或者图片。
我试着把grayarea改成透明，但是是灰色，只有把bgcolor和grayareabackcolor都设置成透明，才能显示html的背景色。
2：能够透明之后，发现下拉框的子菜单也是透明的，点开的子菜单可以看到下面表格的内容，不是很好的效果。
3：子菜单的颜色，选中，hover的颜色，没有找到可以定制的方法。
4：一般网页可以做到滑到哪一行，哪一行的边框变色显示，但是spreadjs，似乎我没找到方法。要显示的画面就是附件里的，附件里的是用htmlcss写的

KevinChen · KevinChen

您好，如果您需要自定制单元格内元素的展示效果，

可以参考一下自定义单元格的方式，

通过重写单元格类型的一些方法，可以改变单元格的样式，如图：

image.png207105712.png

参考学习指南：

https://demo.grapecity.com.cn/spreadjs/tutorialsample/#/demos/customCellType

关于第4个问题，我理解的是鼠标划入划出效果，

我上传一个Demo，您参考一下。

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

[已处理] spread 半透明凹凸金属感设置

9 个回复

讲师达人

悬赏达人

元老葡萄

SpreadJS 认证

SpreadJS 高级认证

微信认证勋章