草庐IT

javascript - 像 HTML 构造函数一样可透视，无需聚合即可显示分组元素

coder 2023-08-04 原文

我正在尝试构建一个 HTML 组件，该组件将为我的数据提供类似数据透视表的 View ，但在数据透视区域内使用自定义 html 元素而不是总和或计数；在下面的示例中，我将只使用一串文本，但我希望它是任何 HTML 元素(img、div、文本等)。

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

我可以看到自己重新使用由 js pivottable 生成的 html(带有一个简单的计数)并随后在 jQuery 中附加项目，但这似乎是一个相当老套的解决方案，并且缺少自定义选项。这种方法的优点包括在某些时候我想在 web-ui 中包含对列的过滤/自定义。

我在找什么？给定一个包含多行的 JSON 数组，这些行具有属性 [Columngroup1, Columngroup2] 和 [Rowgroup 1, rowgroup2, rowgroup3]，我想将其布局为以下(内置于 Tableau 中):

在上面的示例中，[业务线、类型、产品] 是行组，[Active_or_roadmap、路线图季度] 是列组。数据集的粒度更深一层，每个“产品”可以包含多个子产品，它们应该放在“事件”列(期间标题)或路线图季度列之一中。这可以通过子产品 15.03 和 15.01 在视觉上分组在同一“行”中看出。

我面临什么困难？

  • 我是否为此使用 HTML 表格，我应该使用带有指示行/列的类的 div，还是两者的组合？增加了复杂性:在某些时候，我希望非标题列可以水平“滚动”(如果太宽)。
  • 在我想过滤掉一些行的情况下，我应该重新生成整个表还是(误)使用 visibility:hidden？在后一种情况下:我将如何处理被部分过滤的产品组(即子产品 15.01 不应该可见，子产品 15.03 确实需要可见)
  • 如何将对象详细信息“嵌入”到 DOM 元素中？即，在悬停/点击事件的情况下，我如何知道 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 中并对其进行排序。在构建行时将每个项目放在正确的列位置。然后重复下一个状态。

希望这是有道理的。

关于javascript - 像 HTML 构造函数一样可透视，无需聚合即可显示分组元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41380822/

javascriptHTML自定sectionhttpsjquery

有关javascript - 像 HTML 构造函数一样可透视，无需聚合即可显示分组元素的更多相关文章

  1. ruby-on-rails - 按天对 Mongoid 对象进行分组 - 2

    在控制台中反复尝试之后，我想到了这种方法，可以按发生日期对类似activerecord的(Mongoid)对象进行分组。我不确定这是完成此任务的最佳方法，但它确实有效。有没有人有更好的建议，或者这是一个很好的方法？#eventsisanarrayofactiverecord-likeobjectsthatincludeatimeattributeevents.map{|event|#converteventsarrayintoanarrayofhasheswiththedayofthemonthandtheevent{:number=>event.time.day,:event=>ev

  2. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  3. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  4. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  5. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  6. ruby-on-rails - 在 ruby​​ 中使用 gsub 函数替换单词 - 2

    我正在尝试用ruby​​中的gsub函数替换字符串中的某些单词，但有时效果很好，在某些情况下会出现此错误？这种格式有什么问题吗NoMethodError(undefinedmethod`gsub!'fornil:NilClass):模型.rbclassTest"replacethisID1",WAY=>"replacethisID2andID3",DELTA=>"replacethisID4"}end另一个模型.rbclassCheck 最佳答案 啊，我找到了!gsub!是一个非常奇怪的方法。首先，它替换了字符串，所以它实际上修改了

  7. ruby - 在 Ruby 中有条件地定义函数 - 2

    我有一些代码在几个不同的位置之一运行:作为具有调试输出的命令行工具，作为不接受任何输出的更大程序的一部分，以及在Rails环境中。有时我需要根据代码的位置对代码进行细微的更改，我意识到以下样式似乎可行:print"Testingnestedfunctionsdefined\n"CLI=trueifCLIdeftest_printprint"CommandLineVersion\n"endelsedeftest_printprint"ReleaseVersion\n"endendtest_print()这导致:TestingnestedfunctionsdefinedCommandLin

  8. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  9. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  10. ruby - 在哈希的键数组中追加元素 - 2

    查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用

随机推荐