Angular ngGrid选择页面加载行

Question

我的问题是这个问题的延伸

从ng-grid获取选择的行？

plunker - http://plnkr.co/edit/DiDitL?p=preview

我需要在页面加载时选择一行,我需要避免收听'ngGridEventData'

调用$ scope.gridOptions.selectRow(2,true); 由于网格尚未加载,因此控制器主体失败.

避免监听ngGridEventData是因为我需要控制器监听之前触发的事件,并根据我需要选择nggrid行.

有任何想法吗？

Answer 1

添加$timeout到您的控制器并执行此操作:

$timeout(function() { 
    $scope.gridOptions.selectRow(2, true); 
});

示例:http://plnkr.co/edit/hDv7b8？p = preview

Answer 2

可以在此处找到没有超时的解决方案:https: //github.com/angular-ui/ui-grid/issues/2267 此处: 使用angular-ui-grid预先选择加载的行

$scope.gridOptions = {
...
                onRegisterApi : function (gridApi) {
                    $scope.gridApi = gridApi;
                    $scope.gridApi.grid.modifyRows($scope.gridOptions.data);
                    $scope.gridApi.selection.selectRow($scope.gridOptions.data[0]);
                }
            };

显然,modifyRows需要v3.0.0-rc.22 +

Answer 3

对我来说，没有一个答案有效（我使用 ng-grid v2.0.14）。

所选答案有效可能是因为数据不大或未通过 ajax 调用加载，否则您无法选择 ngGridEventData“之前”的行，因为在呈现行时会触发该事件，并且您无法选择行，如果它还没有被渲染。
如果这些条件中的任何一个失败，或者网格比平时花费太多时间来渲染，那么所选的答案将不起作用。

我有一个大约有 2000 行的可滚动网格，但我对侦听 ngGridEventData 没有任何限制，因此我对此进行了研究，尽管它对我来说有一个奇怪的行为： ngGridEventData 对我恰好触发了 4 次，在数据到达之前两次来自 ajax 调用以及之后的两次。
我使用了这个jquery插件http://benalman.com/projects/jquery-throttle-debounce-plugin/（即使没有jQuery也可以使用）来制作它，以便该函数仅被调用一次。

由于这还不够，“selectRow/selectItem”函数会触发“afterSelectionChange”事件两次（由于某种原因，第一次出现错误的行）。这就是我必须做的，以确保该事件仅触发一次并且仅针对正确的行。

这就是我身上发生的事情：

• ngGridEventData（没有 afterSelectionChange 触发器，可能是因为没有渲染的行）
• ngGridEventData（没有 afterSelectionChange 触发器，可能是因为没有渲染的行）
• Ajax 调用检索数据
• 延迟（可能是渲染）
• ngGrid事件数据
• 选择更改后 x2
• ngGrid事件数据
• 选择更改后 x2

所以我不得不使用这个：

• 去抖以确保该函数在延迟期间仅被调用一次（超时很短，因为调用彼此接近成对，并且渲染的行检查确保第一个调用不是正在使用的调用）
• 检查渲染的行是否 > 0，以确保前 2 个事件不会在慢速系统（或慢速连接）上触发，其中延迟和数据加载可能需要一些时间
• 可以选择使用 rowItem.selected 来避免另一个“错误”，因为 afterSelectionChange 事件即使在选择一行时也会触发两次（一次针对未选择的行，一次针对选定的行）
• 使用 fireOnlyOnce 变量以避免调用两次 afterSelectionChange 函数。

这是示例代码：

$scope.fireOnlyOnce=true;
$scope.gridOptions = {
    //Stuff
    afterSelectionChange: function (rowItem) {
        if($scope.fireOnlyOnce){
            if(rowItem.selected){
                //Do stuff
            }
        } else {
            $scope.fireOnlyOnce=true;
        }
    }
};

$scope.$on('ngGridEventData', jQuery.debounce(100, function (row, event){   
    var renderedRows = row['targetScope'].renderedRows.length;
    if(renderedRows>0){
        $scope.fireOnlyOnce=false;
        $timeout(function(){$scope.gridOptions.selectRow(2, true)});
    }
}));