10

问题

使用 Google 图表工具可以将 HTML 值插入到字段值中，但是，我不相信这是一种好的做法。

我使用的方法如下：

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Name', 'Height', 'Smokes','test'],
    ['Tong Ning mu', 174, true,'<input type="button" value="test" />'],
    ['Huang Ang fa', 523, false,'<input type="button" value="test" />'],
    ['Teng nu', 86, true,'<input type="button" value="test" />']
  ]);

  // Create and draw the visualization.
  visualization = new google.visualization.Table(document.getElementById('table'));
  visualization.draw(data, {
    allowHtml: true
  });
}

我的问题

  1. 还有其他更好的方法可以实现这一目标吗？
  2. 有没有办法从这些按钮中捕获事件，同时检索正在接收事件的行的 id？换句话说，我如何知道单击了哪个按钮以及它代表了哪一行？
4

2 回答 2

3

有没有办法从这些按钮中捕获事件，同时检索正在接收事件的行的 id？换句话说，我如何知道单击了哪个按钮以及它代表了哪一行？

例如尝试这种方式

google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable);
function getSelectedRowNumber(table) {
  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) {
      message += '{row:' + item.row + ',column:' + item.column + '}';
    } else if (item.row != null) {
      message += '{row:' + item.row + '}';
    } else if (item.column != null) {
      message += '{column:' + item.column + '}';
    }
  }
  if (message == '') {
    message = 'nothing';
  }
  alert('You selected ' + message); 
}
function drawTable() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Name', 'Height', 'Smokes','test'],
    ['Tong Ning mu', 174, true,'<input type="button" value="test" />'],
    ['Huang Ang fa', 523, false,'<input type="button" value="test" />'],
    ['Teng nu', 86, true,'<input type="button" value="test" />']
  ]);

  // Create and draw the visualization.
  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(data, {
    allowHtml: true,
    showRowNumber: true,
    width: '100%',
    height: '100%',
    cssClassNames: {tableRow: 'myClass'}
  });
  // this works for buttons
  $(document).on('click','input[type=button]',function() {
    getSelectedRowNumber(table);
  });
  // this works for clicking on row uncomment to test it
  /*$(document).on('click','tr.myClass',function() {
    getSelectedRowNumber(table);
  });*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>

于 2016-05-25T19:30:12.057 回答
0

我使用 Google Charts 已经有一段时间了，据我所知没有更好的方法。

你的方法应该是有效的。祝你好运。:)

于 2013-06-08T14:13:14.953 回答