使用Google可视化如何触发特定行上的选择事件

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

本文关键字：选择 事件 Google 可视化 何触发 使用      更新时间：2023-09-26

我目前有一个表，当一行被单击时，我想模拟单击GV表上的同一行。这是听众。

$(".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);
});

这是触发选择事件正确，但我需要的是能够得到行在回调，像这样。

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

单击GV表项时，该项包含有行和列的对象。我如何在表上触发特定行上的选择，并使其与单击本身相同?

我确实找到了一种方法，尽管我更希望两条路由都能使用相同的代码。

$(".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();

下面的代码将DOM表上的click与google可视化表同步:

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

select事件在GV表上被触发，就在它被点击的时候。
演示-> http://jsfiddle.net/7v487nhf/

注意:您只能选择整行或多行，因此设置col是不必要的-以任何方式结束null

相关文章：