Hello stackoverflow社区，
我正在使用AngularJS ui-grid。我想在页面加载时（当用户返回页面时）自动滚动到特定行，但它不起作用。
$scope.notifType = [1,2,3,4,5,6,7];
$scope.gridOptions = {
rowHeight: 50,
infiniteScrollPercentage : 15,
enableSorting: false,
columnDefs: [
{
field: 'type', width: 50, displayName: '',
cellTemplate: '<div align="center" style="padding-top:10px">'
+'<button class="btn btn-xs "'
+' ng-click="getExternalScopes().displayChoosenNotifType(row.entity.type)" '
+'tooltip-placement="right" tooltip-html-unsafe="{{\'notification.tooltipFilter\' |translate}}<i>{{\'notification.type.type\'+row.entity.type | translate}}</i>"'
+' ng-class="{'
+'\'btn-primary\': row.entity.type==1,'
+'\'btn-warning\': row.entity.type==2 ,'
+'\'btn-danger\': row.entity.type==3||row.entity.type==4||row.entity.type==5,'
+'\'btn-success\': row.entity.type==6,'
+'\'btn-purple\': row.entity.type==7,'
+'}">'
+'<span class="icon " '
+' ng-class="{'
+'\'icon-alarm\': row.entity.type==1,'
+'\'icon-bell\': row.entity.type==2 ,'
+'\'icon-warning\': row.entity.type==3||row.entity.type==4 ,'
+'\'icon-pencil\': row.entity.type==5 ,'
+'}">'
+ '<span class="icon classicNotifIcon" ng-if="row.entity.type===6">C</span>'
+ '<span class="icon classicNotifIcon" ng-if="row.entity.type===7">M</span>'
+'</span></button></div>',
enableColumnMenu:true,enableHiding:false,
menuItems:[
{
title: $translate.instant('notification.type.all'),
action: function(){
var notifType = [1,2,3,4,5,6,7];
$scope.displayChoosenNotifType(notifType);
}
},
{
title: $translate.instant('notification.type.type1'),
action: function(){
var notifType = [1];
$scope.displayChoosenNotifType(notifType);
}
},
{
title: $translate.instant('notification.type.type2'),
action: function(){
var notifType = [2];
$scope.displayChoosenNotifType(notifType);
}
},
{
title: $translate.instant('notification.type.type3'),
action: function(){
var notifType = [3,4];
$scope.displayChoosenNotifType(notifType);
}
},
{
title: $translate.instant('notification.type.type5'),
action: function(){
var notifType = [5];
$scope.displayChoosenNotifType(notifType);
}
},
{
title: $translate.instant('notification.type.type6'),
action: function(){
var notifType = [6];
$scope.displayChoosenNotifType(notifType);
}
},
{
title: $translate.instant('notification.type.type7'),
action: function(){
var notifType = [7];
$scope.displayChoosenNotifType(notifType);
}
}
]
},
{ field:'notification',
cellTemplate: '<div style="padding-left:5px">'
+'<a ng-click="getExternalScopes().modify(row.entity)" '
+'ng-class="{'
+'\'button\': row.entity.type==1 || row.entity.type==2 || row.entity.type==3 || row.entity.type==4 || row.entity.type==6 || row.entity.type==7,'
+'\'classicNotif\': row.entity.type==5'
+'}" '
+'ng-attr-tooltip="{{row.entity.type==1 || row.entity.type==2 || row.entity.type==3 || row.entity.type==4? (\'notification.tooltipChange\' | translate) : \'\'}}"'
+'tooltip-placement="right" '
+'translate="{{\'notification.message.type\'+row.entity.type}}" translate-values="{{row.entity}}">'
+'</a>'
+ '</div>',
enableColumnMenu: false,
}
]
};
var gridApiDefer = $q.defer();
$scope.gridOptions.onRegisterApi = function(gridApi){
$scope.gridApi = gridApi;
//call when scrolling have reach the limit percentage.
// retrieves next notifications based on current page number
gridApi.infiniteScroll.on.needLoadMoreData($scope,function(){
$http.get('resources/notifications?page='+$scope.page+'&size=15&type='+$scope.notifType)
.success(function(notifList) {
if(notifList.length > 0){
// add notifications to the grid
$scope.gridOptions.data = getData(notifList, $scope.page);
++$scope.page;
}
gridApi.infiniteScroll.dataLoaded();
})
.error(function() {
gridApi.infiniteScroll.dataLoaded();
});
});
gridApiDefer.resolve();
};
if($location.path().indexOf("/home/return") > -1){
var notifs = notifCriteriaService.getCriteria();
$scope.notifType = notifs.notifTypesList;
$scope.page = notifs.page;
$scope.gridOptions.data = notifs.notifsDataList;
gridApiDefer.promise.then(function(){
$scope.gridApi.cellNav.scrollTo($scope.gridApi.grid, $scope, $scope.gridOptions.data[20], $scope.gridOptions.columnDefs[0]);
});
}else{
$scope.getNotifs();
}<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-success" ng-click="scrollTo(20,0)">Scroll To Row 20</button>
<button type="button" class="btn btn-success" ng-click="scrollToFocus(50,0)">Focus Row 50</button>
<div>
<div style="margin-top: 25px; background-color:#fff;">
<div id="grid1" ui-grid="gridOptions" ui-grid-infinite-scroll ui-grid-cellNav></div>
</div>
</div>
</div>
</div>
当我使用＆＃34;滚动到＆＃34;按钮，它工作（不是scrollToFocus按钮，但它不是主要问题）。通过调试我的代码，我看到当我自动调用scrollTo方法时（即：不使用按钮），网格行数组为空，而当我使用按钮时它被填充。 我认为我的网格在第一个场景中尚未完全初始化。
我认为这可行，因为ui-grid教程说：
提供一个以编程方式请求滚动到特定行或列的示例 - 用于记住页面状态并在用户返回时滚动回该位置。（http://ui-grid.info/docs/#/tutorial/202_cellnav）
你看到我做错了吗？
提前致谢。
PS：这是我在这个神奇的网站上的第一篇文章，英语不是我的母语，如果我使用错误的stackoverflow工具，请随时纠正我;）
答案 0 :(得分：1)
我假设你在9个月前的某个时候解决/解决了这个问题，但无论如何......
您正在呼叫$scope.gridApi.cellNav.scrollTo(....);
在uiGrid教程的示例中，他们使用的是$scope.gridApi.core.scrollTo(...)
在我看来，这是一个复制和粘贴错误，因为您在代码中的其他位置使用了$scope.gridApi.cellNav.scrollToFocus(....);。