加入對谷歌的可視化事件的DataTable

Question

這裏我有谷歌的可視化數據表：

 function drawTroskovnik() { 
      var cssClassNames = { 
     'headerRow': 'zaglavlje', 
     'tableRow': 'red', 
     'oddTableRow': 'red', 
     'selectedTableRow': 'orange-background large-font', 
     'hoverTableRow': 'prekoreda', 
     'headerCell': 'gold-border', 
     'tableCell': 'cell', 
     'rowNumberCell': 'underline-blue-font' 
    }; 

    // Create and populate the data table. 
    var JSONObject = $.ajax({ 
        url: 'getTroskovnik.php', // make this url point to the data file 
        dataType: 'json', 
        data:{id_akt:ajdi}, 
        async: false, 
        type: 'POST', 
       }).responseText; 

    var data = new google.visualization.DataTable(JSONObject, 0.5); 

for (var y = 0, maxrows = data.getNumberOfRows(); y < maxrows; y++) { 
    for (var x = 1, maxcols = data.getNumberOfColumns(); x < maxcols; x++) { 

     data.setValue(y, x, '<input id="costRedovi" vr="'+ ajdi + '" kol="'+ data.getColumnLabel(x) +'" class="form-control" value="'+data.getValue(y,x)+'">'); 
    } 
} 
for (var y = 0, maxrows = data.getNumberOfRows(); y < maxrows; y++) { 

     data.setValue(y, 0, '<input class="span2 form-control" id="pocetak1" size="16" type="text" value="'+data.getValue(y,0)+'" readonly>'); 

} 


     data.addColumn('string', 'Kontrole'); 
     for (var y = 0, maxrows = data.getNumberOfRows(); y < maxrows; y++) { 
     var mc= data.getNumberOfColumns()-1; 
data.setValue(y, mc, '<a data-toggle="modal" data-target="#update" href="#" class="btn btn-success"><i class="fa fa-pencil"></i> Details</a>'); 

     } 

     var table = new google.visualization.ChartWrapper({ 
      'chartType': 'Table', 
      'containerId': 'chart2', 
      'cssClassNames': 'cssClassNames', 
      'options': { 
     cssClassNames: cssClassNames, 
     allowHtml: true 
    } 
     }); 


    // Create and draw the visualization. 
    visualization = new google.visualization.Table(document.getElementById('tpltroskovnik')); 
    visualization.draw(data, {'allowHtml': true, cssClassNames: { 
    'headerRow': 'zaglavlje', 
     'tableRow': 'red', 
     'oddTableRow': 'red', 
     'selectedTableRow': 'orange-background large-font', 
     'hoverTableRow': 'prekoreda', 
     'headerCell': 'gold-border', 
     'tableCell': 'cell', 
     'rowNumberCell': 'underline-blue-font' 
    }}); 
} 
new google.visualization.events.addListener(visualisation, 'ready', function() { 
     google.visualization.events.addListener(visualisation, 'select', function() { 
      var selection = visualisation.getSelection(); 
      console.log(selection); 
      //alert(data.getValue(visualization.getSelection()[0].row, 0)); 


       ajdi = data.getDataTable().getValue(selection[i].row,0); 
       console.log(data.getDataTable().getValue(selection[i].row,0)); 
       console.log(data.getDataTable().getColumnLabel(selection[i])); 


     }) 

    }); 

，但在這裏我需要添加事件：

new google.visualization.events.addListener(visualisation, 'ready', function() { 
      google.visualization.events.addListener(visualisation, 'select', function() { 

我嘗試在代碼結束，但我得到的錯誤：可視化沒有定義...還有如何獲得所選行的選擇（）？當表準備就緒時如何運行功能SSS();？

Answer 1

事件處理程序需要在與可視化文件相同的範圍內創建。另外，一般來說，您希望在繪製圖表之前設置所有事件處理程序（特別是「準備就緒」的事件處理程序）。再次

visualization = new google.visualization.Table(document.getElementById('tpltroskovnik')); 

// add select event 
google.visualization.events.addListener(visualisation, 'select', function() { 
    var selection = visualisation.getSelection(); 
    for (var i = 0; i < selection.length; i++) { 
     // selection[i].row contains the row index, eg: 
     console.log(data.getValue(selection[i].row, 1)); 
    } 
}); 
// run SSS when table is ready 
google.visualization.events.addListener(visualisation, 'ready', SSS); 

visualization.draw(data, { 
    'allowHtml': true, 
    cssClassNames: { 
     'headerRow': 'zaglavlje', 
     'tableRow': 'red', 
     'oddTableRow': 'red', 
     'selectedTableRow': 'orange-background large-font', 
     'hoverTableRow': 'prekoreda', 
     'headerCell': 'gold-border', 
     'tableCell': 'cell', 
     'rowNumberCell': 'underline-blue-font' 
    } 
});