隐藏行内容时折叠Google Visualization表格的实现咨询

我来帮你搞定这个折叠表格的需求，结合你提到的5000行带分类/子分类的表格、jQuery操作、Google Apps Script场景，给你一套落地的方案：

1. 先确保行的类名与关联标记正确 #

首先得保证你的分类行和子分类行在生成时就带上了可识别的类名和关联标识，这样jQuery才能精准定位。在Google Apps Script构建DataTable的时候，可以给行的自定义属性里加上类名和父ID：

// 初始化DataTable
var data = new google.visualization.DataTable();
// ... 这里添加你的25列定义 ...

// 添加分类行：给行加上类名和唯一ID
data.addRow([
  {v: '主分类名称', p: {className: 'category-toggle-row', id: 'category-1'}},
  // ... 其他列数据 ...
]);

// 添加对应子分类行：带上子分类类名，并用data-parent关联到父分类ID
data.addRow([
  {v: '子分类名称', p: {className: 'subcategory-row', parentId: 'category-1'}},
  // ... 其他列数据 ...
]);

2. 编写jQuery折叠/展开核心逻辑 #

Google Visualization Table渲染完成后才会生成DOM，所以一定要在表格的ready事件里绑定操作，避免找不到元素。这里用事件委托优化性能（毕竟5000行数据，直接绑定每个分类行太耗资源）：

google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable);

function drawTable() {
  var data = new google.visualization.DataTable();
  // ... 你的数据初始化代码 ...
  
  var table = new google.visualization.Table(document.getElementById('table_container'));
  var options = {
    allowHtml: true, // 必须开启，否则自定义类名和HTML内容不生效
    cssClassNames: {
      tableRow: 'base-table-row',
      // ... 其他自定义样式类 ...
    }
  };

  table.draw(data, options);

  // 表格渲染完成后绑定折叠事件
  google.visualization.events.addListener(table, 'ready', function() {
    // 用事件委托绑定分类行点击事件
    $('#table_container').on('click', '.category-toggle-row', function() {
      var $currentRow = $(this);
      var parentId = $currentRow.attr('id');
      
      // 找到当前分类下的所有子行
      var $subRows = $('.subcategory-row[data-parent="' + parentId + '"]', '#table_container');
      
      // 平滑折叠/展开子行，完成后自动调整表格容器高度避免留白
      $subRows.slideToggle(300, function() {
        $('#table_container').css('height', 'auto');
      });
      
      // 切换分类行的折叠图标（可选，提升用户体验）
      $currentRow.find('.toggle-icon').toggleClass('expanded collapsed');
    });

    // 默认折叠所有子分类行
    $('.subcategory-row', '#table_container').hide();
  });
}

3. 样式优化（提升交互体验） #

给分类行加个鼠标指针样式，再添个折叠/展开的小图标，用户体验会好很多：

.category-toggle-row {
  cursor: pointer;
  background-color: #f5f5f5;
  font-weight: bold;
}

.toggle-icon {
  display: inline-block;
  width: 14px;
  margin-right: 8px;
}

.toggle-icon.expanded::after {
  content: '▼';
}

.toggle-icon.collapsed::after {
  content: '▶';
}

4. 大数据量性能优化建议 #

因为你有5000行数据，直接渲染可能会有性能问题，这里给两个小建议：

• 事件委托优先：刚才的代码已经用了事件委托，只需要绑定一次事件，不用给每个分类行单独绑定
• 分页加载：如果允许的话，给Table加上分页配置，比如在options里加page: 'enable', pageSize: 50，减少单次渲染的行数
• 缓存DOM选择器：把常用的DOM元素（比如表格容器）缓存起来，避免重复查找

注意要点 #

• 一定要确保allowHtml: true在Table的配置项里，否则自定义类名和HTML内容不会生效
• 如果后续有动态更新表格数据的操作，记得在table.draw()之后重新绑定事件（或者用事件委托就不用管这个）
• 子行的data-parent属性要和父分类行的id完全匹配，否则找不到对应子行

内容的提问来源于stack exchange，提问作者Torey Price