javascript – Pivottable像HTML构造函数没有聚合显示分组的元素

我正在尝试构建一个 HTML组件,它将为我的数据提供一个类似于可转动的视图,但是在pivotarea中使用自定义的html元素,而不是一个总和或数量;在下面的例子中,我将只使用一串文本,但我希望它是任何HTML元素(img,div,text等).

我发现很难选择一个方向,编写自己的代码来生成它(使用jQuery)或使用像Pivottable这样的库.我尝试过后者,但是找不到正确的方向w.r.t.自定义聚合函数.

我可以看到自己重新使用由js可转换(通过简单的计数)生成的html,然后在jQuery中追加项目,但这似乎是一个非常棘手的解决方案,同时缺乏自定义选项.这种方法的优点包括以下事实：在某些时候,我想在web-ui中包含过滤/自定义列.

我在找什么？给定一个具有多个属性[Columngroup1,Columngroup2]和[Rowgroup 1,rowgroup2,rowgroup3]的JSON数组的JSON数组,我想根据以下内容进行布局(内置于Tableau)：

在上面的示例中,[Businessline,Type,Product]是行组,[Active_or_roadmap,Roadmap Quarter]是列组.数据集的粒度更深一层,每个“产品”可以由多个子产品组成,这些子产品应放置在“活动”列(期间标题)或路线图季度列之一中.子产品15.03和15.01在视觉上分组在相同的“行”中可以看出.

我面临什么困难？

>我是否使用HTML表,应该使用带有表示行/列的类的div或两者的组合？增加了复杂性：在某些时候,我想让非标题列水平“滚动”(如果太宽).
>在某些情况下,我想过滤出一些行,我应该重新生成整个表,或者(误)使用可见性：隐藏？在后一种情况下：我将如何处理部分过滤的产品组(即副产品15.01不可见,子产品15.03确实需要显示)
>如何在DOM元素中嵌入对象详细信息？即在悬停/ clickevent的情况下,我将如何知道JSON对象中哪一行对应于被点击的名称？

请注意,我不一定正在寻找一个完全符合我上面所说的答案,我主要是寻找一个方向w.r.t.代码从JSON到上表以结构体面和灵活的方式.

非常感谢任何帮助,我有一个codepen包含一些样本数据和一个相当差的尝试.

function load_data(callback){
    $.getJSON('https://s3-us-west-2.amazonaws.com/s.cdpn.io/997352/data_portfolioroadmap.json',function(data){
      callback(data)
    });

}

解决方法

我在想这样的事情

{[
    {productTitle:"Product 01.01",state:"Active","quarter":"2017Q1"},{productTitle:"Product 01.02",state:"Roadmap","quarter":"none"}
]}

有了这个,你应该能够遍历数组并放置每个元素.我会使用自定义div.首先循环过来,建立这些.循环在状态和过滤器抓住你需要的.将过滤后的结果放入一个新的var并排序.当您正在构建行时,每个项目在正确的列位置的位置.然后重复下一个状态.

希望这是有道理的.