Làm cách nào để cuộn một ngGrid để hiển thị lựa chọn hiện tại?

Question

Tôi đang thiết lập lựa chọn ngGrid của tôi từ JavaScript, gọi số gridOptions.selectItem(). Tôi đã chọn multiSelect thành false, vì vậy chỉ có một hàng được chọn. Tôi muốn ngGrid tự động cuộn để hiển thị hàng mới được chọn, nhưng tôi không biết làm thế nào để làm điều này: bất cứ ai có thể giúp đỡ, xin vui lòng?

Về một chủ đề liên quan: tôi có thể tắt lựa chọn hàng bằng cách nhấp chuột không? Nếu vậy, làm thế nào?

Edited để thêm

Tôi cũng muốn vô hiệu hóa bàn phím điều hướng của hàng đã chọn, nếu có thể.

gì làm việc:

câu trả lời AardVark71 của làm việc. Tôi phát hiện ra rằng ngGrid định nghĩa một thuộc tính ngGrid trên biến số gridOptions chứa tham chiếu đến đối tượng lưới chính nó. Các chức năng cần thiết được tiếp xúc thông qua các thuộc tính của đối tượng này:

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

lưới của tôi được cố định ở độ cao 13 dòng, và logic của tôi cố gắng để làm cho hàng đã chọn xuất hiện ở giữa của lưới điện.

Tôi vẫn muốn tắt chuột & thay đổi bàn phím đối với lựa chọn, nếu có thể.

gì cũng làm việc:

Đây có lẽ là gần gũi hơn với những 'góc Way' và đạt được cùng một kết thúc:

// 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); 

mặc dù có hiệu lực khi liên tiếp được chọn bằng cách nhấp vào nó có thể có một chút bối rối.

Answer 1

Có vẻ như bạn có thể sử dụng phương pháp scrollTop để cuộn.

cũng Xem http://github.com/angular-ui/ng-grid/issues/183 và plunker sau từ @ bryan-watt http://plnkr.co/edit/oyIlX9?p=preview

Một ví dụ thế nào điều này có thể làm việc sẽ như sau:

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

chỉnh sửa:

Đối phần thứ hai của câu hỏi của bạn "vô hiệu hóa sự kiện chuột và bàn phím của các hàng đã chọn" có thể là tốt nhất để bắt đầu ne w Câu hỏi. Có vẻ như bạn muốn đặt enableRowSelection của bạn tự động thành false? Không có ý tưởng nếu đó là có thể.

Answer 2

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); 
      } 
     } 
    }); 

Answer 3

Tôi tin rằng tôi đang tìm kiếm hành vi tương tự từ ng-grid như chính bạn.Hàm sau được thêm vào đối tượng gridOptions của bạn sẽ không cho phép lựa chọn qua các phím mũi tên (nhưng cho phép nó nếu shift hoặc ctrl được giữ) và cuộn cửa sổ khi di chuyển xuống danh sách bằng các phím mũi tên để hàng hiện được chọn luôn hiển thị :

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; 
    }, 

chỉnh sửa: đây là một plunkr: http://plnkr.co/edit/xsY6W9u7meZsTJn4p1to?p=preview

Hy vọng rằng sẽ giúp!

Answer 4

Tôi thấy câu trả lời được chấp nhận ở trên không hoạt động với phiên bản mới nhất của lưới ui (v4.0.4 - 2017-04-04).

Đây là mã tôi sử dụng:

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

Trong gripOptions, bạn cần phải đăng ký gridApi trong onRegisterApi.

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