找回密码
 立即注册

QQ登录

只需一步,快速开始

Clark.Pan 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2022-6-13 15:55  /   查看:2273  /  回复:0
本帖最后由 Clark.Pan 于 2022-6-16 12:28 编辑

SpreadJS V15.1中,集算表终于支持多层的列头了,这是多么喜大普奔的一件事情 image.png565998839.png
为什么这么说呢,让我们来看看之前的一个实现:
image.png730988769.png

如上图所示,红框中的数据都是各种涨幅数据。按道理属于一类,应该归类起来,方便查看。但是之前没有多层列头的处理,如果要做到归类的效果,只能用headerFit: "stack" 这样的类型处理。
于是有了如上的效果,堆叠的一层接一层导致列头占了表格中的大部分,感觉特别的臃肿。
另外也没有明显的层级关系,感觉像一层套一层的递进关系,实际上这些数据都是属于涨幅的分类,各自之间是并列的。所以总给人感觉怪怪的。
20220616122739.png
在V15.1之后,SpreadJS集算表支持了多层列头。这样我们就可以通过多层列头的设置对相关列进行一个分组。
首先,在addView设置的每一列对象中调整了caption属性,用于多层列头的设置。该属性原来是一个字符串,现在是一个数组结构,数组有小到大罗列多层列头每一行的名称。于是我们可以改造成如下代码:
  1. var view = fundDetailTable.addView("fundDetailView", [
  2. ...
复制代码
可以看到caption设置成了数组,表示多层列头,多列头的第一行的名称均为单位净值涨幅,第二行为各自维度的涨幅统计。集算表会自动对同名的列头进行合并操作。结果如下所示:
image.png447143248.png
跟上面的对比,很明显表头部分"减肥成功了",并且简洁明了的表明了这是同一类的数据。
image.png616453551.png

0 个回复

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