Question

我使用谷歌图表工具在我的网页上与谷歌地图一起显示表格可视化。当用户单击地图位置时，回调会自动从表格中的位置列表中选择相应的位置。

这样可以正常工作，但是表格不会自动滚动表格，因此所选行是可见的（有很多点，因此只有有限的数量显示在表格vis的右侧有一个滚动条。）

我无法找到任何方法来设定当前的位置＆＃39;视口到表。有没有办法做到这一点？

谢谢！

以下代码段：

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?
    }
}

Answer 1

我不知道如何使用谷歌图表api，但这是一个可能有帮助的想法：

如果您可以找到屏幕高度，表格行高度并计算屏幕中可以容纳的表格行数，那么您可以计算滚动条需要滚动多少才能显示您选择的表格行。

因此，如果您的屏幕高度可以显示20行，并且您选择了第25行，则滚动滚动条5 * rowHeight + margin。这可以在javascript或ajax文件中完成。

基本上你已经拥有了所需的所有数据，只需要找到如何在javascript中以编程方式滚动滚动条。

Answer 2

我找到了这个，它有效。

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

编辑：从中，这将滚动到＆table; div＆＃39;中表格的选定列。我发现这很充足，经过一些微调，以确保我想要的行清晰可见。

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

Answer 3

像这样的东西。答案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;
                }
            }
        },

Google Chart - setSelection不会滚动到表格可视化中的选定行

3 个答案: