0

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

这工作正常，但表格不会自动滚动表格，因此所选行是可见的（有很多点，所以只有有限的数量显示在 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?
    }
}
4

3 回答 3

3

我不知道如何使用 google chart api 做到这一点，但这里有一个可能会有所帮助的想法：

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

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

基本上，您已经拥有了执行此操作所需的所有数据，只需要了解如何在 javascript 中以编程方式滚动滚动条。

于 2012-11-14T10:23:44.643 回答
-1

我找到了这个，它有效。

https://groups.google.com/forum/#!searchin/google-visualization-api/table $20setSelection/google-visualization-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-07T10:42:43.457 回答
-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-19T16:46:38.953 回答