UI网格与自定义单元格模板按钮 - 如何取消行选择的事件？ [英] UI-Grid with button in custom cell template - How to cancel row select event?

问题描述

我使用的UI网格v 3.0.1。

我对其中显示每行中的一个按钮的特定列中的自定义单元模板。我重视它调用另外，AppScope引发一些行动NG-点击属性。

所有精美的作品。

但是，自定义模板按钮的点击也导致有问题的行的选择，以进行切换。

我需要prevent这种情况的发生。

即。一个点击自定义模板按钮应该离开当前行的选择状态，因为它是。

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

任何人都可以点我在正确的方向？

  vm.gridOptions = {
        数据：vm.myGridData
        columnDefs：
            {场：COL1显示名：COL1，宽度：100}，
            {场：col2的显示名：col2的，宽度：200}，
            {名：，cellTemplate：＆LT; D​​IV＆GT;＆LT;按钮NG点击='grid.appScope.displayRecord（row.entity）'＆GT;＆LT; I类='发发搜索'＆GT;＆LT; / I＆GT;＆LT; /按钮＆GT;＆LT; / DIV＆gt;中}
        ]
        enableRowSelection：真实，
        enableSelectAll：真实，
        showGridFooter：真实，
        多选：真实，
        enableSorting：真实，
        enableFiltering：真实，
        enableFullRowSelection：真实，
        enableRowHeaderSelection：真
    };
 

解决方案

只需添加

  $ event.stopPropagation（）;
 

到 NG-点击属性，你可以在此看到的 plunker 。

您可以链的JavaScript 你的 NG-点击里面调用写他们一个挨着另一个与公正的属性; 为这样一个分隔符：

  NG-点击=instructionOne（）; instructionTwo（参数）; $ event.stopPropagation（）;
 

I am using ui-Grid v 3.0.1.

I have a custom cell template for a particular column which displays a button in each row. I have attached a ng-click attribute which calls the appScope to trigger some action.

All works beautifully.

However, the clicking of the custom template button also causes the selection of the row in question to be toggled.

I need to prevent this from happening.

i.e. a click to the custom template button should leave the current row's selection status as it was.

I suspect I need to cancel the row selection event somehow.

Can anyone point me in the right direction?

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
    };

解决方案

Just add

$event.stopPropagation();

to the ng-click attribute as you can see in this plunker.

You can chain javascript calls inside your ng-click attribute just by writing them one next to another with a ; as a separator like this:

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

这篇关于UI网格与自定义单元格模板按钮 - 如何取消行选择的事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！