Question

我在使用带有行选择和自定义单元格元素的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>'}];

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

请指导。

Answer 1

有趣的问题，还没有碰到它，但我相信这是我的唯一时间。我已经创建了一个插件来演示我的解决方案。

基本上，正如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');
    });

  };

Answer 2

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

如何防止自定义元素上的行选择单击UI-GRID

2 个答案: