UI-自定义单元格模板中带按钮的网格 - 如何取消行 select 事件？

Question

我正在使用 ui-Grid v 3.0.1.

我有一个特定列的自定义单元格模板，它在每一行中显示一个按钮。我附加了一个 ng-click 属性，它调用 appScope 来触发一些操作。

所有作品都很漂亮。

但是，单击自定义模板按钮也会导致切换相关行的选择。

我需要防止这种情况发生。

即单击自定义模板按钮应该使当前行的选择状态保持原样。

我怀疑我需要以某种方式取消行选择事件。

谁能指出我正确的方向？

vm.gridOptions = {
        data: "vm.myGridData",
        columnDefs: [
            { field: "Col1", displayName: "Col1", width: 100 },
            { field: "Col2", displayName: "Col2", width: 200 },
            { name: " ", cellTemplate: "<div><button ng-click='grid.appScope.displayRecord(row.entity)'><i class='fa fa-search'></i></button></div>" }
        ],
        enableRowSelection: true,
        enableSelectAll: true,
        showGridFooter: true,
        multiSelect: true,
        enableSorting: true,
        enableFiltering: true,
        enableFullRowSelection: true,
        enableRowHeaderSelection: true
    };

Answer 1

只需添加

$event.stopPropagation();

添加到 ng-click 属性，如您在此 plunker.

中所见

您可以将 javascript 调用链接到 ng-click 属性中，只需将它们一个接一个地写下来，并使用 ; 作为分隔符，如下所示：

ng-click = "instructionOne(); instructionTwo(argument); $event.stopPropagation();"

UI-自定义单元格模板中带按钮的网格 - 如何取消行 select 事件？

UI-Grid with button in custom cell template - How to cancel row select event?

angularjs

angular-ui-grid