Javascript 类似数据透视表的HTML构造函数，无需聚合以显示分组元素
我正在尝试构建一个HTML组件，该组件将在我的数据上提供类似数据透视表的视图，但在数据透视区域中包含自定义HTML元素，而不是总和或计数；在下面的示例中，我将只使用一个文本字符串，但我希望它是任何HTML元素（img、div、text等） 我发现很难选择一个方向，编写自己的代码来生成它（使用jQuery）或使用类似的库。我尝试过后一种方法，但甚至找不到正确的方向w.r.t.定制聚合器功能 我可以看到自己重新使用js数据透视表生成的html（简单计数）并在jQuery中添加项目，但这似乎是一个相当粗糙的解决方案，同时缺少自定义选项。这种方法的优点包括，在某一点上，我希望在web ui中包含列的过滤/自定义 我在寻找什么？给定一个JSON数组，该数组具有多行属性[Columngroup1，Columngroup2]和[RowGroup1，rowgroup2，rowgroup3]，我希望按照以下方式进行布局（内置表）： 在上面的示例中，[业务线、类型、产品]是行组，[活动路线图或路线图季度]是列组。数据集的粒度更深一层，每个“产品”可以由多个子产品组成，应该放在“活动”列（期间标题）或路线图季度列之一。通过将子项目15.03和15.01直观地分组在同一“行”中，可以看出这一点 我面临什么困难？Javascript 类似数据透视表的HTML构造函数，无需聚合以显示分组元素,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试构建一个HTML组件，该组件将在我的数据上提供类似数据透视表的视图，但在数据透视区域中包含自定义HTML元素，而不是总和或计数；在下面的示例中，我将只使用一个文本字符串，但我希望它是任何HTML元素（img、div、text等） 我发现很难选择一个方向，编写自己的代码来生成它（使用jQuery）或使用类似的库。我尝试过后一种方法，但甚至找不到正确的方向w.r.t.定制聚合器功能 我可以看到自己重新使用js数据透视表生成的html（简单计数）并在jQuery中添加项目，但这似乎是一个相当
- 我是否使用HTML表来实现这一点，我应该使用div和类来表示行/列，还是两者的组合？增加了复杂性：在某种程度上，我希望非标题列可以水平滚动（如果太宽）
- 在我想过滤掉一些行的情况下，我应该重新生成整个表还是（错误地）使用visibility:hidden？在后一种情况下：如何处理被部分筛选的产品组（即子产品15.01不应可见，子产品15.03不需要可见）
- 如何在DOM元素中“嵌入”对象细节？i、 例如，在悬停/单击事件的情况下，我如何知道JSON对象中的哪一行对应于被单击的名称
function load_data(callback){
$.getJSON('https://s3-us-west-2.amazonaws.com/s.cdpn.io/997352/data_portfolioroadmap.json', function(data){
callback(data)
});
}
我认为，管理这个复杂的结构可能会迫使您将这个表视为一个嵌入式组件。考虑到这一点，React（）可能是合适的解决方案
考虑扩展现有库对于提高成本效益至关重要，因此请参见（）使用React组件进行扩展可能会更容易。我的想法是这样的
{[
{productTitle:"Product 01.01",state:"Active","quarter":"2017Q1"},
{productTitle:"Product 01.02",state:"Roadmap","quarter":"none"}
]}