angular ui-网格行选择

Question

我正在使用 angular ui.grid 我的问题是当我像下面那样使用时单击其 selected

的行

enableRowSelection: true,
enableRowHeaderSelection: false,
multiSelect: false

我改成

后

enableRowSelection: true,
enableRowHeaderSelection: true,
multiSelect: false

现在只有 select 复选框有效，但点击行无效，请帮助...

Answer 1

看到这个问题：https://github.com/angular-ui/ng-grid/issues/2254

目前，行 header 选择和行选择不能协同工作。我相信前者的目的是 work-around 在使用单元格导航时进行行选择。

此更改被列为增强功能，因此已在路线图上，只是未计划在 3.0 版本中使用。

更新：

好吧，这是你可以做到的（尽管依赖未发布的测试版模块来获得 "urgent" 不是一个好主意，IMO）。

从选择功能的 uiGridCell 指令中取出代码，将其撕掉，并将其放入您自己的模块中。特别是这里的代码：https://github.com/angular-ui/ng-grid/blob/v3.0.0-rc.20/src/features/selection/js/selection.js#L757

这是一些未完成的示例代码。您需要确保您没有绑定行 header 单元格，否则复选框选择将不起作用。

angular.module('ui.grid.custom.rowSelection', ['ui.grid'])

.directive('uiGridCell', function ($timeout, uiGridSelectionService) {
  if ($scope.col.isRowHeader) {
    return;
  }

  registerRowSelectionEvents();

  function selectCells(evt) { ... }
  function touchStart(evt) { ... }
  function touchEnd(evt) { ... }
  function registerRowSelectionEvents() { ... }
});

最后，这里有一个 plunker 演示了整个过程。您可以复制此代码并根据需要进行调整：http://plnkr.co/edit/44SYdj19pDDaJWiSaPBt?p=preview

Answer 2

这个问题应该早就被修复了 (https://github.com/angular-ui/ui-grid/commit/679b615bd19ff71ff1e835d7f6066e7a919f279a)，但它在 angular-ui-grid 版本 3.1.1

中仍然存在

有一个关于它的新问题 (https://github.com/angular-ui/ui-grid/issues/5474) 有一个解决方法来覆盖 css 规则：

.ui-grid-cell.ui-grid-disable-selection.ui-grid-row-header-cell {
  pointer-events: auto;
}

angular ui-网格行选择

angular ui-grid row selection

angularjs

ng-grid

angular-ui-grid