如何在GWT中的Google可視化表中添加Handler on Cell？

Question

GWT的Google Visualization 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); 
    } 
}; 

}

Answer 1

可視化表沒有通過在選擇事件列的信息，這樣你就不能識別單個細胞這種方式。您需要在表格的單元格上註冊單擊事件處理程序，然後確定單元格的行和列索引。這裏有一個辦法做到這一點使用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代碼應該工作。

Answer 2

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（其中，如果你對錶進行排序，它的位置改變該行的索引將不會發生變化）使用

google.visualization.events.addListener(table, 'select', function() {    
    var selected=table.getChart().getSelection(); 
    var item=selected[0]; 
    rowIndex=item.row; 
}); 

這將在。對代碼之前運行（「點擊」 ，...）在準備就緒功能中起作用。

Answer 3

谷歌表有4個事件：準備，選擇，頁面，排序。

排序或分頁時，它會停止監聽ready事件。 要使單元格在分頁或點擊排序後單擊工作，您需要在所有單元上添加點擊偵聽器。

您可以使用click而不是mouseover。 在select事件中，我使用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; 
    }  
});