在 google 可视化 table 中访问某个单元格

Question

我正在使用 google visualization table 在 table 中显示一些数据。我向 table 添加了一个侦听器来跟踪用户点击事件。

一些这样的代码：

// Add our selection handler.
google.visualization.events.addListener(table, 'select', selectHandler);

// The selection handler.
// Loop through all items in the selection and concatenate
// a single message from all of them.
function selectHandler() {
  var selection = table.getSelection();
  var message = '';
  for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    if (item.row != null && item.column != null) {
      var str = data.getFormattedValue(item.row, item.column);
      message += '{row:' + item.row + ',column:' + item.column + '} = ' + str + '\n';
    } else if (item.row != null) {
      var str = data.getFormattedValue(item.row, 0);
      message += '{row:' + item.row + ', column:none}; value (col 0) = ' + str + '\n';
    } else if (item.column != null) {
      var str = data.getFormattedValue(0, item.column);
      message += '{row:none, column:' + item.column + '}; value (row 0) = ' + str + '\n';
    }
  }
  if (message == '') {
    message = 'nothing';
  }
  alert('You selected ' + message);
}

问题是，监听器似乎只能检测到点击了哪一行，而不知道列信息。有人知道如何通过用户点击访问 google visualization table 中的特定单元格吗？或者我可以使用其他更强大的js库？

Answer 1

没有基于 API 的列索引访问，您必须使用 DOM。

向 <table> 添加点击侦听器，当它触发时，使用父 <tr>[= 的子节点中 <td> 的索引检测列索引15=]

简单示例：

google.setOnLoadCallback(drawTable);

function drawTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time Employee');
  data.addRows([
    ['Mike', {
        v: 10000,
        f: ',000'
      },
      true
    ],
    ['Jim', {
        v: 8000,
        f: ',000'
      },
      false
    ],
    ['Alice', {
        v: 12500,
        f: ',500'
      },
      true
    ],
    ['Bob', {
        v: 7000,
        f: ',000'
      },
      true
    ]
  ]);

  var table = new google.visualization.Table(document.getElementById('table_div'));
  google.visualization.events.addListener(table, 'ready', function() {
    document.querySelector('#table_div tbody').addEventListener('click', function(e) {
      var cell = e.srcElement || e.target,
        column = null;
      if (table.getSelection().length && cell !== cell.parentNode.firstChild) {
        for (var i = 0; i < cell.parentNode.childNodes.length; ++i) {
          if (cell.parentNode.childNodes[i] === cell) {
            column = i - 1;
            break;
          }

        }

        if (column !== null) {
          var msg = ['column-index is ' + column];
          var selection = table.getSelection();
          //if current row has been selected
          if (/\bgoogle-visualization-table-tr-sel\b/.test(cell.parentNode.className)) {
            msg.push('row-index is ' + selection[selection.length - 1].row);
            msg.push('value of clicked cell is:' + data.getValue(selection[selection.length - 1].row, column));
          } else {
            msg.push('current row is not selected');
          }

          alert(msg.join('\n---------\n'))
        }
      } else {
        alert('no row selected');
      }
    });
  });
  table.draw(data, {
    showRowNumber: true
  });
}

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['table']}]}"></script>
<div id="table_div"></div>

Answer 2

对于 google.visualization.table，您可以考虑使用以下方法访问列属性（来自 table 单元格）：

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

function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Salary');
    data.addColumn('boolean', 'Full Time Employee');
    data.addRows([
      ['Mike', {
          v: 10000,
          f: ',000'
      },
        true
      ],
      ['Jim', {
          v: 8000,
          f: ',000'
      },
        false
      ],
      ['Alice', {
          v: 12500,
          f: ',500'
      },
        true
      ],
      ['Bob', {
          v: 7000,
          f: ',000'
      },
        true
      ]
    ]);

    var table = new google.visualization.Table(document.getElementById('table_div'));
    google.visualization.events.addListener(table, 'select', function(){
        selectHandler(table);
    });
    table.draw(data, {
        showRowNumber: false
    });
}



function selectHandler(table) {
  var selection = table.getSelection();
  if(selection.length === 0)
      return;

  var cell = event.target; //get selected cell
 
  document.getElementById('output').innerHTML = "Row: " +  selection[0].row + " Column: " +  cell.cellIndex;

}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="table_div"></div>
<div id="output"></div>

在 google 可视化 table 中访问某个单元格

access a certain cell in google visualization table

javascript

html-table

google-visualization