如何滾動ngGrid以顯示當前選擇？

我從JavaScript設置我的ngGrid的選擇，呼叫gridOptions.selectItem()。我將multiSelect設置爲false，因此只有一行被選中。我想ngGrid自動滾動顯示新選擇的行，但我不知道該怎麼做：任何人都可以幫忙嗎？如何滾動ngGrid以顯示當前選擇？

關於相關主題：可以通過鼠標單擊禁用行選擇嗎？如果是這樣，怎麼樣？

編輯補充

我也想停用選定行的鍵盤導航，如果可能的話。

什麼工作：

AardVark71的答覆工作。我發現ngGrid在gridOptions變量上定義了一個屬性ngGrid，該變量持有對網格對象本身的引用。必要的功能都通過該對象的屬性暴露：

$scope.gridOptions.selectItem(itemNumber, true); 
$scope.gridOptions.ngGrid.$viewport.scrollTop(Math.max(0, (itemNumber - 6))*$scope.gridOptions.ngGrid.config.rowHeight);

我的網格被固定在13行高，和我的邏輯試圖使所選擇的行出現在網格的中間。

我還想禁用鼠標&鍵盤如果可能，請更改選擇。

什麼還曾：

這可能是更接近「角之路」，達到同樣的目的：

// This $watch scrolls the ngGrid to show a newly-selected row as close to the middle row as possible 
$scope.$watch('gridOptions.ngGrid.config.selectedItems', function (newValue, oldValue, scope) { 
      if (newValue != oldValue && newValue.length > 0) { 
       var rowIndex = scope.gridOptions.ngGrid.data.indexOf(newValue[0]); 
       scope.gridOptions.ngGrid.$viewport.scrollTop(Math.max(0, (rowIndex - 6))*scope.gridOptions.ngGrid.config.rowHeight); 
      } 
     }, true);

雖然效果一行時，通過點擊它選擇能有點令人不安。

來源

2013-08-28 Max

你可以顯示你到目前爲止得到的代碼嗎？這聽起來像你可以使用scrollTop方法。另請參閱https://github.com/angular-ui/ng-grid/issues/183以及以下來自@ bryan-watt的運動員http://run.plnkr.co/plunks/oyIlX9/ – AardVark71

好的，我已經得到了它的工作，感謝這個提示！有一個未記錄的'ngGrid'屬性被添加到'gridOptions'屬性中，該屬性持有對實際網格本身的引用。這個函數調用來滾動視口然後是'$ scope.gridOptions.ngGrid。$ viewport.scrollTop（rowNumber * $ scope.gridOptions.ngGrid.config.rowHeight）'AardVark71 - 請將這個更新爲答案＆我會信任你：非常感謝！ – Max

很高興爲你效勞，我將其解釋爲答案 – AardVark71

這聽起來像你可以利用滾動滾動方法。

又見http://github.com/angular-ui/ng-grid/issues/183和@布萊恩 - 瓦以下plunker http://plnkr.co/edit/oyIlX9?p=preview

一個例子，如何這可能是工作情況如下：

function focusRow(rowToSelect) { $scope.gridOptions.selectItem(rowToSelect, true); var grid = $scope.gridOptions.ngGrid; grid.$viewport.scrollTop(grid.rowMap[rowToSelect] * grid.config.rowHeight); }

編輯：

對於問題的第二部分「禁用所選行的鼠標和鍵盤事件」可能最好啓動一個ne w問題。聽起來像你想動態設置你的enableRowSelection爲false？不知道這是否可能。

來源

2013-08-29 14:40:13 AardVark71

是的，你可以動態設置它，如下所示：'$ scope.gridOptions.ngGrid.config.enableRowSelection = true;'。然而，它沒有很好的效果。如果我在初始'gridOptions'中設置'enableRowSelection = false;'，即使選項隨後設置爲'true'，但上/下箭頭鍵仍保持活動狀態，鼠標點擊將被禁用並保持禁用狀態。清除該選項也會禁用所選行的樣式更改，這對我來說可以。 – Max

如果您激活網格上的過濾器，此解決方案不起作用。任何人都有這個想法？ –

var grid = $scope.gridOptions.ngGrid; 
    var aggRowOffsetTop = 0; 
    var containerHeight = $(".gridStyle").height() - 40; 
    angular.forEach(grid.rowFactory.parsedData, function(row) { 
     if(row.entity.isAggRow) { 
      aggRowOffsetTop = row.offsetTop; 
     } 
     if(row.entity.id == $scope.selectedId) { 
      if((row.offsetTop - aggRowOffsetTop) < containerHeight) { 
       grid.$viewport.scrollTop(aggRowOffsetTop); 
      } else { 
       grid.$viewport.scrollTop(row.offsetTop); 
      } 
     } 
    });

來源

2013-12-26 13:03:19

你也應該說一些說明 –

我相信我是從ng-grid尋找和你一樣的行爲。添加到gridOptions對象中的以下函數將不允許通過箭頭鍵進行選擇（但如果按住shift或ctrl，則允許），並使用箭頭鍵在列表中向下移動時滾動窗口，以便當前選定的行始終可見：

beforeSelectionChange: function(rowItem, event){ 
    if(!event.ctrlKey && !event.shiftKey && event.type != 'click'){ 
     var grid = $scope.gridOptions.ngGrid; 
     grid.$viewport.scrollTop(rowItem.offsetTop - (grid.config.rowHeight * 2)); 
     angular.forEach($scope.myData, function(data, index){ 
     $scope.gridOptions.selectRow(index, false); 
     }); 
    } 
    return true; 
    },

編輯：這裏是一個plunkr： http://plnkr.co/edit/xsY6W9u7meZsTJn4p1to?p=preview

希望幫助！

來源

2014-10-06 18:28:00 Fingel

我發現上面接受的答案是不與最新版本的ui-grid（v4.0.4 - 2017-04-04）一起使用。

這裏是我使用的代碼：

$scope.gridApi.core.scrollTo(vm.gridOptions.data[indexToSelect]);

在gripOptions，你需要註冊在onRegisterApi的gridApi。

onRegisterApi: function (gridApi) { 
    $scope.gridApi = gridApi; 
},

來源

2017-05-16 23:01:44 Adamy

自從我遇到這個問題已經很長時間了 - 從那以後很多版本！感謝您保持最新的答案列表。 – Max

如何滾動ngGrid以顯示當前選擇？

回答

相關問題