Angular ngGrid 在页面加载时选择行 [英] Angular ngGrid select row on page load

问题描述

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

My question is an extension to thisquestion

从 ng-grid 中获取选择的行?

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

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

I need a row to be selected on page load and I need to avoid listening to 'ngGridEventData'

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

calling $scope.gridOptions.selectRow(2, true); in the controller body fails since the grid has not been loaded.

避免侦听 ngGridEventData 是因为我需要控制器侦听之前触发的事件，并且基于此我需要选择 nggrid 行.

avoiding listening to ngGridEventData is due to the fact that I need the controller to listen to an event triggered before and based on that I need to select the nggrid row.

有什么想法吗?

推荐答案

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

For me, none of the answers worked (i use ng-grid v2.0.14).

选定的答案可能有效，因为数据要么不大，要么未通过 ajax 调用加载，否则您无法在 ngGridEventData 之前选择行，因为在呈现行时会触发该事件，而您无法选择如果尚未呈现，则为一行.
如果这些条件中的任何一个失败，或者网格渲染时间比平时多，则所选答案将不起作用.

The selected answer works probably because data is either not big or is not loaded through an ajax call otherwise you can't select a row "before" ngGridEventData since the event is fired when the rows are rendered and you can't select a row if it hasn't been rendered yet.
Should any of these conditions fail or the grid take too much time than usual to render then the selected answer will not work.

我有一个大约有 2000 行的可滚动网格，但我对收听 ngGridEventData 没有任何限制，所以我进行了研究，尽管它对我来说有一个奇怪的行为:ngGridEventData 对我来说正好触发了 4 次，两次在数据从 ajax 调用到达之前和之后两次.
我使用了这个 jquery 插件 http://benalman.com/projects/jquery-throttle-debounce-plugin/ (即使没有 jQuery 也可以使用)来使该函数只被调用一次.

I have a scrollable grid with about 2000 rows, but I haven't any restriction on listening to the ngGridEventData so i worked on that, although it has a weird behavior for me: The ngGridEventData fires exactly 4 times for me, twice before data arrives from the ajax call and twice after.
I used this jquery plugin http://benalman.com/projects/jquery-throttle-debounce-plugin/ (it can be used even without jQuery though) to make it so that the function was called only once.

由于这还不够，selectRow/selectItem"函数会触发afterSelectionChange"事件两次(第一次由于某种原因出现了错误的行).这是我必须做的，以确保事件只触发一次，并且只针对正确的行.

And since this is not enough, the "selectRow/selectItem" function triggers the "afterSelectionChange" event twice (the first time with the wrong row, for some reason). This is what i had to do to make sure that the event is fired only once and only for the correct row.

这就是我的情况:

• ngGridEventData(没有 afterSelectionChange 触发器，可能是因为没有渲染的行)
• ngGridEventData(没有 afterSelectionChange 触发器，可能是因为没有渲染的行)
• Ajax 调用以检索数据
• 延迟(可能是渲染)
• ngGridEventData
• afterSelectionChange x2
• ngGridEventData
• afterSelectionChange x2

所以我不得不使用这个:

So i had to use this:

• 去抖动以确保函数在延迟期间只被调用一次(超时很低，因为调用是成对的，并且呈现的行检查确保第一个调用不是正在使用的调用)
• 检查呈现的行是否 > 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)});
    }
}));

这篇关于Angular ngGrid 在页面加载时选择行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！