像HTML构造函数一样可以旋转,没有聚合来显示分组元素

Question

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

我发现很难选择一个方向,编写我自己的代码来生成它(使用jQuery)或使用像Pivottable这样的库.我已经尝试了后者,但甚至无法找到定制聚合器功能的正确方向.

我可以看到自己重新使用js pivottable生成的html(带有一个简单的计数),然后在jQuery中附加项目,但这似乎是一个相当hacky的解决方案,同时缺乏自定义选项.这种方法的优点包括这样一个事实,即在某些时候我想在web-ui中包含对colums的过滤/定制.

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

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

我面临什么困难？

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

请注意,我不一定要找到一个完全按照我上面所说的完成的答案,我主要是寻找一个方向,使代码从结构上体面和灵活的方式从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)
    });

}

Answer 1

我在想这样的事情

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

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

希望这是有道理的.

Answer 2

我认为管理这种复杂的结构可能会迫使您将此表视为嵌入式组件。考虑到 React（https://facebook.github.io/react/）可能是合适的解决方案。

考虑扩展现有库对于提高成本效益至关重要，因此请参阅https://react.rocks/example/orb ( http://github.com/nnajm/orb )，它可能更容易使用组件进行扩展那里使用的 React 的问题。