隐藏行内容时折叠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');
});

请参阅以下工作代码段...

＆＃13;

＆＃13;

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);
  });
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;