使用 Google 可视化如何在特定行上触发 select 事件？

Question

我目前有一个 table，当单击一行时，我想模拟在 GV table 上单击同一行。这里是监听器。

$(".mytable tbody tr td").click(function() {
    var colIndex = $(this).parent().children().index($(this));
    var rowIndex = $(this).parent().parent().children().index($(this).parent());
    google.visualization.events.trigger(chart, 'select', null);
});

这会正确触发 select 事件，但我需要的是能够像这样在回调中获取行。

google.visualization.events.addListener(chart, "select", function() {
    var selection = chart2.getSelection();
    var item = selection[0];
    console.log(item, selection);
});

当点击 GV 时 table 项目包含一个带有行和列的对象。我怎样才能在特定行的 table 上触发 select 并使其与点击它本身一样？

我确实找到了一种方法，但我宁愿能够对两条路线使用相同的代码。

$(".mytable tbody tr td").click(function() {
    var colIndex = $(this).parent().children().index($(this));
    var rowIndex = $(this).parent().parent().children().index($(this).parent());
    google.visualization.events.trigger(chart, 'select', {"row": rowIndex, "col": colIndex});
});

google.visualization.events.addListener(chart, "select", function(data) {
    if(typeof data["row"] != "undefined") {
        item = data;
    }
    else {
        var selection = chart2.getSelection();
        var item = selection[0];
    }console.log(data, item);
});

我也尝试过使用 jquery 单击正确的单元格（这将是理想的）。

$(".google-visualization-table .top-level table tbody tr:eq(" + rowIndex + ") td:eq(" + colIndex + ")").click();

Answer 1

下面同步点击 DOM table 与 google 可视化 table :

$(".mytable").on('click', 'tbody td', function(e) {
   chart.setSelection([{row: e.toElement.parentNode.rowIndex-1}]);
   google.visualization.events.trigger(chart, 'select', {});
})

select 事件在 GV table 上被触发，就像它本身被点击一样。
演示 -> http://jsfiddle.net/7v487nhf/

注意：您只能 select 整行或多行，因此无需设置 col - 以 null 结尾无论如何。

使用 Google 可视化如何在特定行上触发 select 事件？

Using Google visualizations how can you trigger a select event on a specific row?

javascript

jquery

google-visualization