jquery - 隐藏行内容时折叠 Google Vis 表

Question

我有一个电子表格，其中存储了 25 列约 5000 行。有特定类别标题行，然后是子类别行。我已将单元格格式化为带有类名的 HTML，以便我可以有条件地格式化它们，并且用户可以在我的 Web 应用程序中使用 jquery 修改它们。

以下是电子表格的示例:

我正在 Google Apps 脚本中使用 HTML 服务和 Google Visualization ChartWrapper 表来向用户显示此数据。我使用以下 jQuery 代码来取消隐藏隐藏行:

   function toggleByClass(className) {
     $("."+className).toggle();
   }

我的问题是带有隐藏 div 的行仍然有一个高度，我希望它们完全折叠。此外，即使我删除了内容的行，也会在可视化中创建行

我能够使用 CSS 属性 empty-cells:hide; 隐藏行/单元格边框，但行高仍然保留。

我的问题:如何在内容隐藏时隐藏行，但在内容未隐藏时显示它们？

Answer 1

需要切换表格行，而不是内容，
尝试这样...

$('.' + className).closest('tr').toggle();

当表的 'ready' 事件触发时，首先使用切换隐藏

google.visualization.events.addListener(table, 'ready', function () {
  toggleByClass('oddNumber');
  toggleByClass('evenNumber');
});

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['table']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'A');
  data.addColumn('number', 'B');
  data.addRows([
    ['<div class="header">header 1</div>',  10000],
    ['<div class="oddNumber">subcategory 1</div>',  10000],
    ['<div class="oddNumber">subcategory 1</div>',  10000],
    ['<div class="oddNumber">subcategory 1</div>',  10000],
    ['<div class="header">header 2</div>',  10000],
    ['<div class="evenNumber">subcategory 2</div>',  10000],
    ['<div class="evenNumber">subcategory 2</div>',  10000],
    ['<div class="evenNumber">subcategory 2</div>',  10000],
  ]);

  var table = new google.visualization.Table($('#chart_div').get(0));

  google.visualization.events.addListener(table, 'ready', function () {
    toggleByClass('oddNumber');
    toggleByClass('evenNumber');
  });

  table.draw(data, {
    allowHtml: true
  });

  function toggleByClass(className) {
    $('.' + className).closest('tr').toggle();
  }

  $('.toggle-button').on('click', function () {
    toggleByClass(this.id);
  });
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">

<button class="toggle-button ui-button ui-widget ui-corner-all" id="oddNumber">
  <span class="ui-icon ui-icon-seek-prev"></span><span>&nbsp;Toggle Odd</span>
</button>

<button class="toggle-button ui-button ui-widget ui-corner-all" id="evenNumber">
  <span class="ui-icon ui-icon-seek-next"></span><span>&nbsp;Toggle Even</span>
</button>

<div id="chart_div"></div>