我想构建一个HTML组件,它将提供一个类似于pivottable的视图对我的数据,但是使用pivotarea内的自定义html元素而不是总数或计数;在下面的示例中,我将使用一串文本,但我希望它是任何HTML元素(img,div,文本等)。像HTML构造函数的数据透视类似于没有聚合来显示分组元素
我发现很难选择一个方向,编写我自己的代码来生成它(使用jQuery)或使用像Pivottable这样的库。我尝试过后者,但甚至找不到合适的方向w.r.t.定制聚合器功能。
我可以看到自己重新使用由js pivottable生成的html(使用简单的计数),然后在jQuery中追加项目,但这看起来像是一个相当冒险的解决方案,同时缺少自定义选项。这种方法的优点包括在某些时候我希望在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元素中嵌入对象细节?即在悬停/ 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)
});
}
2016-12-29
MattV