Angular ngGrid выбрать строку на странице загрузки

Ответ 1

Для меня ни один из ответов не работал (я использую 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 вызов для извлечения данных
• задержка (возможно рендеринг)
• ngGridEventData​​li >
• afterSelectionChange x2
• ngGridEventData​​li >
• afterSelectionChange x2

Поэтому мне пришлось использовать это:

• debounce, чтобы убедиться, что функция вызывается только один раз во время задержки (тайм-аут низкий, поскольку вызовы близки друг к другу в паре, а проверенные строки проверяют, что первый вызов не тот, который используется)
• убедитесь, что отображаемые строки > 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)});
    }
}));

Ответ 2

Добавьте $timeout в свой контроллер и сделайте следующее:

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

Пример: http://plnkr.co/edit/hDv7b8?p=preview

Ответ 3

Решение без таймаута можно найти здесь: 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]);
                }
            };

Очевидно, для измененияRows требуется v3.0.0-rc.22 +

Ответ 4

Хорошо, ответ был присужден давно, но я все же думаю, что у него запах кода (без обид на плакат, но он не оптимален).

То, что я сделал, это использовать событие grid ngGridEventData.

Вы должны быть осторожны, так как он срабатывает несколько раз (один раз для каждой добавленной строки), , но, так как мы знаем размер данных, которые будут заполнять gird, и, позволяет нам проверять, сколько строк было отображено, мы можем сказать, когда отображается последняя строка, что означает, что сетка не отображается полностью ( ПРИМЕЧАНИЕ: Я не тестировал это с помощью прокручивающих сеток, где некоторые строки могут быть не видны, может кто-нибудь, пожалуйста, подтвердите, работает ли это в случае с шляпой? Я лично никогда не использую прокручивающие сетки (это страница браузера, а не рабочий стол).

Что-то вроде этого:

    $scope.$on('ngGridEventData', function (row, event) 
               {   
                   if (event == $scope.vehicleTypeGridOptions.gridId)
                   {
                       console.info('@[email protected] vehicleTypeGridOptions  grid updated');
                       var renderedRows = row['targetScope'].renderedRows.length;
                       console.info('renderedRows = ' + renderedRows + '; num data rows = ' + $scope.vehicleTypesGridData.length);                       

                       if (renderedRows == 0)
                       {
                           return;
                       }

                       // if grid rowcount = dat length then it fully displayed
                       if (renderedRows == $scope.vehicleTypesGridData.length) 
                       {
                           console.log('vehicleTypeGrid fully rendered. Select row zer0, then populate vehicleDescriptionGrid');
                           console.info('Select row zer0');                                
                           $scope.vehicleTypeGridOptions.selectItem(0, true);   // Grid rendered, select first row
                           // console.table($scope.vehicleTypeGridOptions.selectedItems);
                           var vehicle_type =     $scope.vehicleTypeGridOptions.selectedItems[0].vehicle_type;
                           console.info(vehicle_type);                               
                       }
                   }