2013-08-29 25 views
12

Câu hỏi của tôi là một phần mở rộng để thisquestiongóc ngGrid chọn hàng trên tải trang

Getting select rows from ng-grid?

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

Tôi cần một hàng để được lựa chọn trên tải trang và tôi cần phải tránh nghe 'ngGridEventData'

gọi $ scope.gridOptions.selectRow (2, true); trong cơ thể bộ điều khiển không thành công vì lưới chưa được tải.

tránh nghe ngGridEventData là do thực tế là tôi cần bộ điều khiển để nghe một sự kiện được kích hoạt trước đó và dựa trên đó tôi cần phải chọn hàng nggrid.

bất kỳ ý tưởng nào?

Trả lời

4

Đối với tôi, không ai trong số các câu trả lời làm việc (tôi sử dụng ng-lưới v2.0.14). Câu trả lời được chọn có thể hoạt động vì dữ liệu không lớn hoặc không được tải thông qua cuộc gọi ajax nếu không bạn không thể chọn hàng "trước" ngGridEventData vì sự kiện được kích hoạt khi các hàng được hiển thị và bạn không thể chọn một hàng nếu nó chưa được hiển thị.
Nếu bất kỳ điều kiện nào trong số này không thành công hoặc lưới mất quá nhiều thời gian hơn bình thường để hiển thị thì câu trả lời đã chọn sẽ không hoạt động.

Tôi có một lưới cuộn với khoảng 2000 dòng, nhưng tôi không có bất kỳ hạn chế về nghe ngGridEventData vì vậy tôi làm việc trên đó, mặc dù nó có một hành vi kỳ lạ đối với tôi: Các ngGridEventData bắn chính xác 4 lần đối với tôi, hai lần trước khi dữ liệu đến từ cuộc gọi ajax và hai lần sau đó.
Tôi đã sử dụng plugin jquery này http://benalman.com/projects/jquery-throttle-debounce-plugin/ (nó có thể được sử dụng ngay cả khi không có jQuery) để làm cho nó để chức năng được gọi chỉ một lần.

Và vì điều này là không đủ, chức năng "selectRow/selectItem" kích hoạt sự kiện "afterSelectionChange" hai lần (lần đầu tiên với hàng sai, vì một lý do nào đó).Đây là những gì tôi phải làm để đảm bảo rằng sự kiện này chỉ được kích hoạt một lần và chỉ cho hàng chính xác.

Đây là những gì xảy ra cho tôi:

  • ngGridEventData (không afterSelectionChange gây nên, có lẽ vì không có hàng trả lại)
  • ngGridEventData (không afterSelectionChange gây nên, có lẽ vì không có hàng trả lại)
  • Cuộc gọi Ajax để truy xuất dữ liệu
  • trì hoãn (có thể hiển thị)
  • ngGridEventData
  • afterSelectionChange x2
  • ngGridEventData
  • x2 afterSelectionChange

Vì vậy, tôi đã phải sử dụng này:

  • debounce để đảm bảo hàm được gọi chỉ một lần trong thời gian chậm trễ (thời gian chờ thấp từ các cuộc gọi gần nhau trong cặp và kiểm tra các hàng được hiển thị đảm bảo cuộc gọi đầu tiên không phải là cuộc gọi đang được sử dụng)
  • kiểm tra xem các hàng được hiển thị là> 0 để đảm bảo Các sự kiện thứ 2 không được kích hoạt trên các sistems chậm (hoặc kết nối chậm), nơi sự chậm trễ và tải dữ liệu có thể mất một thời gian
  • Tùy chọn sử dụng rowItem.selected để tránh một lỗi khác do sự kiện afterSelectionChange kích hoạt hai lần ngay cả khi chọn một hàng (một lần cho hàng không được chọn và một lần cho hàng đã chọn)
  • sử dụng biến fireOnlyOnce để tránh gọi hai lần hàm afterSelectionChange.

Dưới đây là một số mẫu mã:

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

Thêm $timeout để điều khiển của bạn và thực hiện điều này:

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

Ví dụ: http://plnkr.co/edit/hDv7b8?p=preview

+1

Tại sao phải có thời gian ngoài? Bất kỳ thông tin về nó trong tài liệu góc? – Jaanus

+1

Tôi cần phải đặt vì? – Jaanus

+0

Rất tiếc. Bạn cần phải đặt nó trong một timeout $ vì lưới điện không được khởi tạo khi bộ điều khiển được tạo ra. Một cách khác sẽ là đưa ra một chỉ thị. – user508994

2

Ok, câu trả lời đã được trao từ lâu, nhưng tôi vẫn nghĩ rằng nó có một mùi mã (không có hành vi phạm tội để poster, nhưng nó phụ tối ưu.

những gì tôi đã làm là sử dụng sự kiện của lưới ngGridEventData.

Bạn phải cẩn thận, vì nó bắn nhiều lần (một lần cho mỗi hàng được thêm), nhưng, vì chúng ta biết kích thước của dữ liệu sẽ điền vào gird và, vì sự kiện này, cho phép chúng ta kiểm tra bao nhiêu các hàng đã được hiển thị, có nghĩa là lưới không được hiển thị đầy đủ (GHI CHÚ: Tôi không kiểm tra điều này bằng lưới cuộn, nơi một số hàng có thể không hiển thị, có thể ai đó vui lòng xác nhận xem nó hoạt động trong trường hợp mũ? Cá nhân tôi không bao giờ sử dụng lưới cuộn (đó là trang trình duyệt, không phải là Máy tính để bàn).

Something như thế này:

$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's 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);        
         } 
        } 
+2

Tôi có thể xác nhận nó sẽ không hoạt động khi cuộn lưới. sự kiện này sẽ chỉ kích hoạt cho các hàng được hiển thị (thực sự tôi không chắc chắn nó sẽ kích hoạt cho mỗi hàng. đối với tôi nó bị bắn 4 lần: hai lần với 0 hàng được hiển thị và hai lần với 6 hàng được hiển thị, sau đó nó ngừng kích hoạt) – valepu

Các vấn đề liên quan