Question

对于我的Angular JS网格工作，我使用ui-grid而不是ng-grid作为ui-grid意味着是更纯粹的Angular的新版本。

我有一个网格，我用http响应填充，我可以使用api选择一行（基于找到匹配$ scope变量值的记录） .selection.selectRow方法调用。

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

现有的堆栈溢出问题沿着与ng-grid相同的行，并且答案是指ui-grid中不存在的未记录的功能，因此我无法使用该方法

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

Answer 1

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

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

Answer 2

我设法将一些效果很好的东西混在一起，但它有点狡猾，而且可能更清晰，有更多的Angular / jquery理解。

我使用浏览器dom资源管理器发现滚动条有一个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;
                }
            }
        }
    }
}

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

2 个答案: