如何在GWT中的Google可视化表中的单元格上添加处理程序？

用于GWT的Google可视化API仅提供对行的控制。 如何控制可视化表格中的特定单元格？ selection.isCell（）在任何情况下都不会给出真正的结果

private SelectHandler createSelectHandler(final PieChart chart) {
return new SelectHandler() {
  @Override
  public void onSelect(SelectEvent event) {
    String message = "";

    // May be multiple selections.
    JsArray<Selection> selections = chart.getSelections();

    for (int i = 0; i < selections.length(); i++) {
      // add a new line for each selection
      message += i == 0 ? "" : "\n";

      Selection selection = selections.get(i);

      if (selection.isCell()) {
        // isCell() returns true if a cell has been selected.

        // getRow() returns the row number of the selected cell.
        int row = selection.getRow();
        // getColumn() returns the column number of the selected cell.
        int column = selection.getColumn();
        message += "cell " + row + ":" + column + " selected";
      } else if (selection.isRow()) {
        // isRow() returns true if an entire row has been selected.

        // getRow() returns the row number of the selected row.
        int row = selection.getRow();
        message += "row " + row + " selected";
      } else {
        // unreachable
        message += "Pie chart selections should be either row selections or cell selections.";
        message += "  Other visualizations support column selections as well.";
      }
    }

    Window.alert(message);
  }
};

private SelectHandler createSelectHandler（最终图形图表）{
返回新的SelectHandler（）{
@凌驾
选择公共无效（选择事件事件）{
字符串消息=”；
//可能有多个选择。
JsArray selections=chart.getSelections（）；
对于（int i=0；i

---

}

表格可视化不会在选择事件中传递列信息，因此无法通过这种方式识别单个单元格。您需要在表的单元格上注册一个click事件处理程序，然后确定单元格的行和列索引。这里有一种使用jQuery的方法：

google.visualization.events.addListener(table, 'ready', function () {
    $('#table_div td').click(function () {
        var column = $(this).index();
        var row = $(this).parent().index() - 1; // subtract 1 for the table header
        console.log(row, column);
    });
});

---

您必须使事件处理程序适应GWT Viz API包中使用的方法，但jQuery代码应该可以工作。

表格可视化不会在选择事件中传递列信息，因此您无法通过这种方式识别单个单元格。您需要在表的单元格上注册一个click事件处理程序，然后确定单元格的行和列索引。这里有一种使用jQuery的方法：

google.visualization.events.addListener(table, 'ready', function () {
    $('#table_div td').click(function () {
        var column = $(this).index();
        var row = $(this).parent().index() - 1; // subtract 1 for the table header
        console.log(row, column);
    });
});

var rowIndex;
var colIndex;
google.visualization.events.addListener(table, 'ready', function () {
jQuery("#table").on("click", "td:not(.google-visualization-table-th)", function() {
   colIndex = jQuery(this).index();
   rowIndex = jQuery(this).parent().index() - 1;
   alert("row "+rowIndex+" col "+colIndex);
   //put rest of function here
});

您必须使事件处理程序适应GWT Viz API包中使用的方法，但是jQuery代码应该可以工作

var rowIndex;
var colIndex;
google.visualization.events.addListener(table, 'ready', function () {
jQuery("#table").on("click", "td:not(.google-visualization-table-th)", function() {
   colIndex = jQuery(this).index();
   rowIndex = jQuery(this).parent().index() - 1;
   alert("row "+rowIndex+" col "+colIndex);
   //put rest of function here
});

这将基于html的行获取rowindex。要基于数据获取rowindex（即使您对表进行排序并更改其位置，行的索引也不会更改），请使用

这将在ready函数的.on（“click”，…）函数中的代码之前运行

这将基于html的行获取rowindex。要基于数据获取rowindex（即使您对表进行排序并更改其位置，行的索引也不会更改），请使用

---

这将在ready函数的.on（“click”，…）函数中的代码之前运行。

Google表有4个事件：ready、select、page、sort

排序或分页时，它将停止侦听就绪事件。 要使单元格单击在分页或排序后工作，需要在所有单元格上添加单击侦听器

您可以使用单击而不是鼠标悬停。 在选择事件中，我使用getSelection来获取和设置所选行属性

var colIndex;

google.visualization.events.addListener(table, 'ready', function () {
    $("#table").find("td").each(function() {    
        $(this).mouseover(function(){
            colIndex=$(this).index();
        });
    }); 
});

google.visualization.events.addListener(table, 'sort', function () {
    $("#table").find("td").each(function() {    
        $(this).mouseover(function(){
            colIndex=$(this).index();
        });
    });
});

google.visualization.events.addListener(table, 'page', function (event) {
    $("#tableGoogle").find("td").each(function() {    
        $(this).mouseover(function(){
            colIndex=$(this).index();
        });
    });
});

google.visualization.events.addListener(table, 'select', function () {
    var selection = table.getSelection();
    var item;
    if(selection.length!=0){
        lastSelection=selection;
    }
    for (var i = 0; i < lastSelection.length; i++) {
        item = lastSelection[i];
    }

    switch (colIndex){
        case 0: 
           data.setValue(item.row,index,true);
           // YOUR CODE FOR COLUMN 0
        break;      
        case 1:
            var id=data.getRowProperty(item.row, 'id');
           // YOUR CODE FOR COLUMN 1
        break;
    }       
});

var-colIndex；
google.visualization.events.addListener（表'ready'，函数（）{
$（“#table”）.find（“td”）.each（function（）{
$（this.mouseover（function（））{
colIndex=$（this.index（）；
});
}); 
});
google.visualization.events.addListener（表'sort'，函数（）{
$（“#table”）.find（“td”）.each（function（）{
$（this.mouseover（function（））{
colIndex=$（this.index（）；
});
});
});
google.visualization.events.addListener（表'page'，函数（事件）{
$（“#tableGoogle”）.find（“td”）.each（function（）{
$（this.mouseover（function（））{
colIndex=$（this.index（）；
});
});
});
google.visualization.events.addListener（表'select'，函数（）{
var selection=table.getSelection（）；
var项目；
if（selection.length！=0）{
最后选择=选择；
}
对于（变量i=0；i

谷歌表格有4个事件：就绪、选择、页面、排序

排序或分页时，它将停止侦听就绪事件。 要使单元格单击在分页或排序后工作，需要在所有单元格上添加单击侦听器

您可以使用单击而不是鼠标悬停。 在选择事件中，我使用getSelection来获取和设置所选行属性

var colIndex;

google.visualization.events.addListener(table, 'ready', function () {
    $("#table").find("td").each(function() {    
        $(this).mouseover(function(){
            colIndex=$(this).index();
        });
    }); 
});

google.visualization.events.addListener(table, 'sort', function () {
    $("#table").find("td").each(function() {    
        $(this).mouseover(function(){
            colIndex=$(this).index();
        });
    });
});

google.visualization.events.addListener(table, 'page', function (event) {
    $("#tableGoogle").find("td").each(function() {    
        $(this).mouseover(function(){
            colIndex=$(this).index();
        });
    });
});

google.visualization.events.addListener(table, 'select', function () {
    var selection = table.getSelection();
    var item;
    if(selection.length!=0){
        lastSelection=selection;
    }
    for (var i = 0; i < lastSelection.length; i++) {
        item = lastSelection[i];
    }

    switch (colIndex){
        case 0: 
           data.setValue(item.row,index,true);
           // YOUR CODE FOR COLUMN 0
        break;      
        case 1:
            var id=data.getRowProperty(item.row, 'id');
           // YOUR CODE FOR COLUMN 1
        break;
    }       
});

var-colIndex；
google.visualization.events.addListener（表'ready'，函数（）{
$（“#table”）.find（“td”）.each（function（）{
$（this.mouseover（function（））{
colIndex=$（this.index（）；
});
}); 
});
google.visualization.events.addListener（表'sort'，函数（）{
$（“#table”）.find（“td”）.each（function（）{
$（this.mouseover（function（））{
colIndex=$（this.index（）；
});
});
});
google.visualization.events.addListener（表'page'，函数（事件）{
$（“#tableGoogle”）.find（“td”）.each（function（）{
$（this.mouseover（function（））{
colIndex=$（this.index（）；
});
});
});
google.visualization.events.addListener（表'select'，函数（）{
var selection=table.getSelection（）；
var项目；
if（selection.length！=0）{
最后选择=选择；
}
对于（变量i=0；i