在角度網格中獲取單元格值

我正在使用角度UI網格來顯示我的項目的3列數據，這些數據將通過API調用作爲JSON對象進行檢索。在角度網格中獲取單元格值

我目前能夠顯示網格中的數據。現在，無論用戶何時單擊某一行，都會發出另一個API調用，將第一列的各個單元值作爲查詢數據發送。收到的響應顯示在模態窗口內。

但是，我無法在網格上放置單擊事件，並在單擊特定行時檢索單元格值，因此無法正確進行第二個API調用。

我想在div上的一個典型的ng點擊將不會滿足我的目的，因爲它不捕獲單元格值。

有人可以建議如何實現此功能？

注意：單元格不可編輯。它們只是只讀的。

HTML

<div ui-grid="gridOptions" ui-grid-resize-columns ui-grid-exporter class="grid"></div>

testFactory.getAPIData() 
      .then(function(response){ 
       $scope.gridOptions.data = response.data; 
      }), function(error){ 
       console.log("Factory error"); 
      } 

     $scope.gridOptions = { 
      enableRowSelection: true, 
      enableRowHeaderSelection: false 
     }; 
     $scope.gridOptions.enableHorizontalScrollbar = 0;    

     $scope.gridOptions.columnDefs = [ 
       { field: 'id', name: 'ID', enableHiding: false }, 
       { field: 'name', name: 'NAME', enableHiding: false }, 
       { field: 'age', name: 'AGE', enableHiding: false } 
     ]; 

     $scope.gridOptions.onRegisterApi = function (gridApi) { 
      $scope.myGridApi = gridApi; 
     };

來源

2016-06-30 Yash Kapila

您可以通過使用angular.element().data()搶格元素的$範圍。行容器的$ scope具有行屬性，其中包含行實體。

下面是一個將mouseup綁定到網格並通過$ scope。$ parent循環到行屬性的示例。然後，可以使用該行屬性進行API調用，並執行您需要的任何響應操作。

http://plnkr.co/edit/P52jJkPRuzmFUWq3Fheb?p=preview

來源

2016-06-30 21:54:03 Xann009

嗨Xann009，感謝您的答覆。我發現了一些與我想達到的匹配的東西。我會嘗試在我的項目中實現這個功能，看它是否有效。 http://plnkr.co/edit/OFoJydRpzoKAGBw3Tfzw?p=preview –

這是你想要的嗎？

var rowCol = $scope.gridApi.cellNav.getFocusedCell(); 
    if(rowCol !== null) { 
     $scope.currentFocused = 'Row Id:' + rowCol.row.entity.id + ' col:' + rowCol.col.colDef.name; 
    }

Example from Plunker

如果是的話，那麼你可以去下面的網站，瞭解詳情： Details

希望這有助於你。祝你好運！！！

來源

2017-07-25 07:19:05

首先，你可以註冊事件的gridOptions.onRegisterApi內

gridBodyElem.addEventListener('mouseup', handleGridClick);

然後只需添加這樣的函數

function handleGridClick(evt) { 
      var targetElem = angular.element(evt.target); 
      var elemData = targetElem.data().$scope; 
}

來源

2017-11-23 09:59:54 ReyHielo

在角度網格中獲取單元格值

回答

相關問題