将插入按钮（HTML）到Google可视化表格图表中。

Question

问题

使用Google Chart工具可以将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？换句话说，我如何知道哪个按钮已被点击，并且它代表哪一行？

- Ben Carey

---

不确定 Google 图表的结构，但测试的一种方法是为所有按钮分配一个类，然后使用点击事件来检查父级并查看它是什么，然后从那里开始。 - Steve

@Steve 这正是我要做的事情，但我认为这是一种“肮脏”的修复方式。这不是一个很好的方法，因为它依赖于父元素具有唯一的特征，无论是 id 还是内容。 - Ben Carey

Answer 1

在获取事件的同时，有没有方法可以捕获这些按钮的事件并检索接收事件的行的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>

- user2560539

Answer 2

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

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

- user2385737