基於Fusion Tables的谷歌圖表中的事件監聽器

Question

我試圖將谷歌圖表與Google圖表一起使用Google Fusion Tables來構建一個響應下拉菜單中變化的表格。

我在密切關注這個例子：

https://developers.google.com/fusiontables/docs/samples/gviz_datatable

我可以使用從Fusion Tables資料繪製表格。該表將響應選擇菜單而沒有問題。

我想實現一個selectHandler來存儲用戶選擇的行的內容。我將把行的內容傳遞給其他函數，但我無法讓selectHandler正常工作。

google.load('visualization', '1', {packages: ['table']}); 

    function drawTable() { 

     var query = "SELECT 'key', 'description' as Style, " + 
       "'business_name' as Name, 'Rating' " + 
       'FROM 15bCp26r1CDuN86Tu8hMOGRWlZwNI30Pl60srz9g'; 
     var vendors = document.getElementById('vendors').value; 
     if (vendors) { 
     query += " WHERE 'description' = '" + vendors + "'"; 
     } 

     var queryText = encodeURIComponent(query); 

     var gvizQuery = new google.visualization.Query(
     'http://www.google.com/fusiontables/gvizdata?tq=' + queryText); 

     gvizQuery.send(function(response) { 
     var table = new google.visualization.Table(
      document.getElementById('visualization')); 

     var data = response.getDataTable(); 

     table.draw(data, { 
      showRowNumber: false, 
      sortColumn: 3, 
      sortAscending: false 
     }); 

     google.visualization.events.addListener(table, 'select', selectHandler); 

     function selectHandler() { 
      //alert("Selected"); 
      var selectedItem = table.getSelection()[0]; 
      var value = data.getValue(selectedItem.row, selectedItem.column); 
      alert(value); 
     } 

    });  

    } 

我正在密切關注這個例子。 selectHandler確實有效。我可以在用戶點擊一行時彈出警告框，但我無法將該行的內容存儲到變量值中。

我在做什麼錯？

Answer 1

當您在selectHandler函數內聲明var value時，value的作用域爲該函數的局部。一旦函數返回，局部變量將被標記爲垃圾收集並且無法訪問。如果你想存儲value長期的，那麼它需要的selectHandler局部範圍之外進行聲明，如下：

var value; 
function selectHandler() {...} 

順便說一句，在selectHandler功能，您應該測試爲選擇的長度，因爲它可能爲零（這會在您的代碼中引發錯誤）或超過1（在這種情況下，您沒有捕獲所有相關信息）。嘗試是這樣的：

function selectHandler() { 
    var selection = table.getSelection(); 
    if (selection.length > 0) { 
     // do something 
    } 
} 

或本：

function selectHandler() { 
    var selection = table.getSelection(); 
    for (var i = 0; i < selection.length; i++) { 
     // do something 
    } 
}