在角度网格中获取单元格值

我正在使用角度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

在角度网格中获取单元格值

回答

相关问题