滚动到Angular ui-grid（不是ng-grid）中的选择答案

【问题标题】：Scroll to selection in Angular ui-grid (not ng-grid)滚动到Angular ui-grid（不是ng-grid）中的选择
【发布时间】：2014-11-14 07:34:43
【问题描述】：

对于我的 Angular JS 网格工作，我使用的是 ui-grid 而不是 ng-grid，因为 ui-grid 旨在成为更纯 Angular 的新版本。

我有一个使用 http 响应填充的网格，并且我能够使用 api.selection.selectRow 方法调用来选择一行（基于查找与 $scope 变量值匹配的记录） .

接下来我需要将网格滚动到该记录。

存在与 ng-grid 相同的堆栈溢出问题，其答案是指未记录的功能，这些功能在 ui-grid 中不存在，因此我无法使用该方法。

我得到的最接近的方法是找到 $scope.gridApi.grid 以获取对实际网格本身的引用，但在 Chrome 调试器中查看属性和方法并没有显示任何听起来可以工作的东西。

【问题讨论】：

标签： angularjs grid scroll

【解决方案1】：

您可以使用 cellNav 插件。您应该已经从选择中引用了您的行实体。文档是here。

gridApi.cellNav.scrollTo(grid, $scope, rowEntity, null);

【讨论】：

这有类似的问题，我的大量代码块有绝对确保该行被带到屏幕上，特别是当它是网格的最后一行时，但毫无疑问这是正确的方法这样做，这就是答案。谢谢@Tom

【解决方案2】：

我设法拼凑了一些效果很好但有点狡猾的东西，如果对 Angular/jquery 有更多的理解，可能会更干净。

我使用浏览器 dom explorer 发现滚动条有一个 css 类，我们可以检测到它来找到它们，然后在它们上设置滚动属性以使网格滚动（网格和滚动条是单独的 div，但它们的属性是绑定所以改变一个更新另一个）。

滚动到网格的最后一行并不完全有效。这可能是一个时间问题，我注意到在使用断点时，网格在屏幕上稍大一点，然后缩小到最终大小。这可能会影响滚动值。

第一个循环通过添加行来找到网格的高度，以及我的数据对象（项目）的行的 y 位置，然后我们找到滚动条并将其设置为 scrollTop，试图使行在屏幕上居中没有越界。

var grid = $scope.projectsGridApi.grid;
// var row = grid.rowHashMap.get(project.$$hashKey);

var found = false;
var y = 0;
var totalY = 0;
var rowHeight = 0;
for (var rowIdx in grid.rows)
{
    var row = grid.rows[rowIdx];
    if (row.entity.$$hashKey == project.$$hashKey)
    {
        found = true;
        rowHeight = row.height;
    }

    if (!found)
    {
        y += row.height;
    }
    totalY += row.height;
}

// now find the scroll bar div and set it's scroll-top 
// (todo: checking if we're at the end of the list - setting scrollTop > max means it doesn't work properly
var grid = $scope.projectsGridApi.grid;


// annoyingly this is nastily coded to find the scrollbar and isn't completely right
// I think the grid is a little taller when this is called, then shrinks 
// which affects what the maximum is (so we might not always be able to put the selected item on screen if it is the last one).

var holderDiv = $('#projectsGridHolder');
if (holderDiv)
{
    var scrollBarDivs = holderDiv.find('.ui-grid-native-scrollbar');
    if (scrollBarDivs)
    {
        for (var scrollBarDivIdx in scrollBarDivs)
        {
            var scrollBarDiv = scrollBarDivs[scrollBarDivIdx];                        

            var scrollBarDivClass = scrollBarDiv.className;
            if (scrollBarDivClass)
            {
                if (scrollBarDivClass.indexOf('vertical') != -1)
                {   
                    var scrollHeight = scrollBarDiv.scrollHeight;
                    var clientHeight = scrollBarDiv.clientHeight;

                    if (rowHeight > 0)
                    {
                        y -= (clientHeight - rowHeight) / 2; // center on screen be scrolling slightly higher up
                    }
                    if (y < 0) y = 0;
                    else if (y > totalY - clientHeight) y = totalY - clientHeight;

                    scrollBarDiv.scrollTop = y;
                }
            }
        }
    }
}

【讨论】：