请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Richard.Ma 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2023-3-7 12:02  /   查看:1114  /  回复:0
本帖最后由 Richard.Ma 于 2023-3-7 12:03 编辑

SpreadJS的数据透视表本身预置了不少的主题,用户可以通过在线编辑器的UI界面做设置,或者通过代码设置切换
比如下面的代码可以切换为黑色主题
  1. pivotTable.theme(GC.Spread.Pivot.PivotTableThemes.dark2);
复制代码
详细的主题设置教程可以参考我们的在线示例

https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/features/pivot-table/pivot-customize/pivot-theme/purejs


对于有些用户来说,预设的主题可能无法完全满足需求。用户希望通过自定义主题来定制数据透视表中各个部分的样式。
针对这种情况SpraedJS也支持创建自定义主题,下面给出创建自定义主题的代码
  1. var custometheme=new GC.Spread.Pivot.PivotTableTheme();
  2. custometheme.name('custometheme');
  3. var wholestyle=new GC.Spread.Pivot.PivotTableStyle();
  4. wholestyle.backColor='#FFDDDD';
  5. custometheme.wholeTableStyle(wholestyle);
  6. var headertyle=new GC.Spread.Pivot.PivotTableStyle();
  7. headertyle.backColor='#AAAAFF';
  8. custometheme.headerRowStyle(headertyle);
  9. var subtotalstyle=new GC.Spread.Pivot.PivotTableStyle();
  10. subtotalstyle.backColor='#FFAAAA';
  11. custometheme.subtotalRow1Style(subtotalstyle);
  12. var grandTotalstyle=new GC.Spread.Pivot.PivotTableStyle();
  13. grandTotalstyle.backColor='#44AAAA';
  14. custometheme.grandTotalRowStyle(grandTotalstyle);
复制代码


在主题创建完成后,我们就可以直接给pivotTable设置上述主题
  1. pt.theme(custometheme);
复制代码


最终效果如下,上述代码仅做演示所以只设置了PivotTableStyle的背景色。实际使用中,你可以针对每个部分比如给总计行设置的grandTotalRowStyle。设置其他的样式数据(边框,字体,对齐)等等。
image.png783618774.png











0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部