1

我在使用带有行选择和自定义单元格元素的 UI-GRId 时遇到问题：

示例 plunker 在这里：http ://plnkr.co/edit/Ed6s6CGFGXyUzj2cyx2g?p=preview 

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

$scope.gridOptions.columnDefs = [
{ name: 'id' },
{ name: 'name'},
{ name: 'age', displayName: 'Age (not focusable)', allowCellFocus : false },
{ name: 'address.city' },
{ name:'address.pin',cellTemplate:'<select><option value="122002">122002</option><option value="122001">122001</option></select>'}];

您可以看到，在行单击时，相应的行被选中，而如果您倾向于隐式选择下拉选项，行选择事件也会被触发，我希望在元素上单击像下拉菜单这样的行选择事件不应该被触发。

请指导。

4

2 回答 2

2

有趣的问题，还没有遇到过，但我相信这是我做之前的唯一时间。我创建了一个 plunk 来演示我的解决方案。

基本上，我所做的就是注册一个观察者，正如 AranS 所提到的。从那里，我们有两个对象可以使用：行和发生的事件。由于事件对象揭示了选择（单击）哪个元素，我们可以识别它是 DIV 还是其他东西。如果选择列表发生变化，evt.srcElement.tagName 的值为“SELECT”。

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

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

    gridApi.selection.on.rowSelectionChanged($scope,function(row,evt){
      if (evt)
        row.isSelected = (evt.srcElement.tagName === 'DIV');
    });

  };
于 2016-05-25T12:30:43.433 回答
1

ui-grid 的 API 允许控制行选择。从另一个线程看这个答案：https ://stackoverflow.com/a/33788459/5954939 。基本上你可以使用事件rowSelectionChanged或isRowSelectable. 如果你需要一个例子，请告诉我。

于 2016-05-25T07:13:43.307 回答