Google Chart - setSelection不會滾動到Table visualization中的選定行

我正在使用Google Chart Tools在我的網頁上沿着Google Map顯示Table visulisation。當用戶點擊地圖位置時，回調會自動從表格中的位置列表中選擇相應的位置。Google Chart - setSelection不會滾動到Table visualization中的選定行

這可以正常工作，但表格不會自動滾動表格，因此選定的行是可見的（有很多點，因此只有有限的數量顯示在Table vis右側的滾動條上。）

我看不到任何方式將視口的當前「位置」設置爲表格。有沒有辦法做到這一點？

謝謝！

代碼下面的代碼片段：

arrBuoyLocs = new google.visualization.DataTable(); 
vTable = new google.visualization.Table(document.getElementById('table_div')); 

// do initialisation, etc... 
. 
. 
. 


function updateSelectedTableItem(buoyid) { 
    console.log('Searching for %s', buoyid); 

    idx = -1; 
    nRows = arrBuoyLocs.getNumberOfRows(); 
    for(iRow = 0; iRow < nRows; iRow++) { 
    if(arrBuoyLocs.getValue(iRow, 0) == buoyid) { 
     console.log('Got match for %s at idx %d', buoyid, iRow); 
      idx = iRow; 
      break; 
     } 
    } 

    if(idx >= 0) { 
     vTable.setSelection([{row: idx, column: null}]); 
     // This highlights the row but does not show it if the row is 
     // scrolled off the screen. How do I scroll the Table to show 
     // the selected row? 
    } 
}

來源

2012-08-09 ccbunney

我不知道如何與谷歌的圖表API來做到這一點，但繼承人一個想法，這可能有助於：

如果你能找到的屏幕高度，錶行高並計算可以在屏幕中放入多少表格行，然後可以計算滾動條需要滾動多少以顯示選定的表格行。

所以如果你有一個屏幕高度可以顯示20行，並且你選擇了第25行，那麼你滾動滾動條5 * rowHeight + margin。這可能可以在JavaScript或ajax文件中完成。

基本上你已經擁有了所有需要的數據，只需要找出如何在javascript中以編程方式滾動滾動條。

來源

2012-11-14 10:23:44 MatriXz

一個明智的想法 - 我會在沒有任何其他選擇的情況下去做這件事！謝謝！ – ccbunney 2012-11-14 20:58:56

-1

我發現這個，它工作。

https://groups.google.com/forum/#!searchin/google-visualization-api/table $ 20setSelection /谷歌的可視化的API/8_atzTNPmL4/etL7VZWjdVQJ

編輯：從哪個，這將滾動到表中的選定的列在 'table_div'。我發現這足夠了，有一些微調，以確保我想要的行顯然是在視圖中。

function on_row_select() { 
    // get the container div for the overflowed table 
var container = $('#table_div').find('.google-visualization-table-table:eq(0)').parent(); 
// get the container div for the fixed header 
var header = $('#table_div').find('.google-visualization-table-table:eq(1)').parent(); 
// get the selected row 
var row = $('.google-visualization-table-tr-sel'); 
// set the scroll position of the overflowed div based on the offset position of the row and the height of the fixed header 
$(container).prop('scrollTop', $(row).prop('offsetTop') - $(header).height()); 
}

來源

2015-08-07 10:42:43

-1

像這樣的東西。這答案a）不需要jQuery和b）當所選行已經在屏幕上時，不要觸摸滾動條。

scrollOnToSelectPosition=function(element) { 
      var tableElement=element.querySelectorAll("table.google-visualization-table-table")[0], 
       selection=tableElement.querySelectorAll("tr.google-visualization-table-tr-sel"); 
      if (selection.length) { 
       var parentDiv=tableElement.parentElement, 
        tableHead=tableElement.querySelectorAll("thead")[0], 
        offset=selection[0].offsetTop-tableHead.clientHeight, 
        viewHeight=parentDiv.clientHeight-tableHead.clientHeight; 
       if (offset>parentDiv.scrollTop && offset<parentDiv.scrollTop+viewHeight) { 
        if (offset+selection[0].clientHeight>parentDiv.scrollTop+viewHeight) { 
         parentDiv.scrollTop=offset+selection[0].clientHeight-viewHeight; 
        } 
       } 
       else { 
        parentDiv.scrollTop=offset; 
       } 
      } 
     },

來源

2016-02-19 16:46:38

Google Chart - setSelection不會滾動到Table visualization中的選定行

回答

相關問題