来自 2D 数组的可折叠 HTML 表格

Question

更新了问题

我的数据是这样的

[['RowId','State', 'Jan-24','Feb-24', 'Mar-24', 'Apr-24'
 'oddheader',   'NY'         100,  200,    300,    400,
 'oddchild','City - 1'   30,   50, 75, 100,
 'oddchild','City - 2'   30,   50, 75, 150,
 'oddchild','City - 3',   40,   100,    150,    150
 'evenheader','IL',        500,  300,    345,  234
 'evenchild','City-4',    500,  300,    345, 234]]

我正在遵循以下示例

隐藏行内容时折叠 Google Vis 表

HTML 代码：

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

<script src="https://www.gstatic.com/charts/loader.js"></script>
<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> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">   
<script type='text/javascript'>
    google.charts.load('current', {'packages':['corechart','controls']});
    google.charts.setOnLoadCallback(toogle_table);
function toogle_table(){
        google.script.run.withSuccessHandler(e=>{
let arr_json = JSON.parse(e);
          /* Creating Dynamic DataTable here - Pick only Column Names from the JSON because every month one month gets added */
          _col_names = arr_json.shift(1);

          _dtbl = new google.visualization.DataTable();

          for(var i in _col_names){
            if(_col_names[i] != 'RowId'){
              if(i<=1){
                _dtbl.addColumn({label:_col_names[i],id:_col_names[i],type:'string'});
              }else{
                var dt_ = _col_names[i];
                _dtbl.addColumn({label:dt_,id:dt_,type:'number'});
              }
            }
          }
/* dynamically Load Data to DataTable from Array */
          for (var i = 0; i < array_json.length; i++){
            console.log(array_json[i][0]);
            
            table_dtbl.addRow([
              array_json[i][0] == 'oddheader' ? '<div class = "header">' + array_json[i][1] + '</div>' :  
              array_json[i][0] == 'oddchild' ? '<div class = "oddNumber">' + array_json[i][1] + '</div>' :
              array_json[i][0] == 'evenheader' ? '<div class = "header">' + array_json[i][1] + '</div>' :
              array_json[i][0] == 'evenchild' ? '<div class = "evenNumber">' + array_json[i][1] + '</div>' : null,            
              (array_json[i][2] == undefined) ? 'dummy' : Number(array_json[i][2]),
              (array_json[i][3] == undefined) ? 'dummy' : Number(array_json[i][3]),
              (array_json[i][4] == undefined) ? 'dummy' : Number(array_json[i][4]),
              (array_json[i][5] == undefined) ? 'dummy' : Number(array_json[i][5])]);

/* As per Solution mentioned in the link - I have added the Toggle code */

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

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

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

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

          $('.toggle-button').on('click', function () {
            toggleByClass(this.id);        
      
}).data_from_gs();
}
</script>

通过上述方法，我能够实现基于按钮单击的折叠和展开行的功能。我正在通过单击单元格行而不是单击按钮来寻求执行相同功能的帮助。

Answer 1

为每一行添加一个公共类

在相应行添加奇偶类，并添加与

data-attribute

相同的内容。

现在使用公共类在行上进行事件附加，并使用

data-attribute

来切换行。

工作片段：

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>subcategory 1</div>', 10000],
    ['<div>subcategory 1</div>', 10000],
    ['<div>subcategory 1</div>', 10000],
    ['<div class="header">header 2</div>', 10000],
    ['<div >subcategory 2</div>', 10000],
    ['<div>subcategory 2</div>', 10000],
    ['<div>subcategory 2</div>', 10000],
  ]);

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

  google.visualization.events.addListener(table, 'ready', function() {
    var tableElement = document.getElementById('chart_div');
    var rows = tableElement.getElementsByTagName('tr');

    // Loop through all rows (skip header row)
    for (var i = 1; i < rows.length; i++) {
      if (i % 2 == 0) {
        rows[i].classList.add('highlight');
        rows[i].classList.add('evenNumber');
        rows[i].setAttribute('data-name', 'evenNumber');
      } else {
        rows[i].classList.add('highlight');
        rows[i].classList.add('oddNumber');
        rows[i].setAttribute('data-name', 'oddNumber');
      }
    }
    //toggleByClass('oddNumber');
    //toggleByClass('evenNumber');
  });

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

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

  $('table').on('click','.highlight', function() {
    toggleByClass($(this).data('name'));
  });
});

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

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