1

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);
  }
};

}

4

3 に答える 3

1

Google テーブルには、ready、select、page、sort の 4 つのイベントがあります。

並べ替えまたはページ付けを行うと、ready イベントのリッスンが停止します。ページネーションまたはソート後にセルのクリックを機能させるには、それらすべてにクリックリスナーを追加する必要があります。

マウスオーバーの代わりにクリックを使用できます。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;
    }       
});
于 2014-07-17T10:05:40.267 に答える
0 
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
});

This gets rowindex based on the row of the html. To get the rowindex based on the data (where the row's index won't change even if you sort the table and it's position changes) use

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

This will run before the code in the .on("click", ...) function in the ready function.

于 2013-10-25T16:10:19.813 に答える
0

テーブル ビジュアライゼーションは選択イベントで列情報を渡さないため、この方法で個々のセルを識別することはできません。テーブルのセルにクリック イベント ハンドラーを登録してから、セルの行と列のインデックスを決定する必要があります。jQuery を使用してそれを行う 1 つの方法を次に示します。

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 コードは機能するはずです。

于 2013-08-22T14:24:42.213 に答える