单击时 ng-grid/ui-grid celltemplate 会导致选择行. [英] ng-grid/ui-grid celltemplate on click causes row to be selected.

问题描述

当我将 celltemplate 用于 ahref 链接时，一旦单击该链接，该行就会突出显示，因为我启用了 RowSelection...但我不希望该行在单击该链接时突出​​显示...链接.

When I use celltemplate for ahref link, once the link is clicked the row highlights because i have RowSelection enabled...but i dont want the row to highlight when the link is clicked..only if the row is clicked anywhere but the link.

同样在我下面的示例图片中，如何删除小箭头以便该列不能显示任何菜单项?

Also in my below example picture, how do I remove the little arrow so no Menuitems can be displayed for that column?

代码:

$scope.gridOptions = { 
    showFooter: true,
    enableFiltering: true,
    enableRowSelection: true,
    enableRowHeaderSelection: false,
    enableSelectAll: true,
    multiSelect: true,
    enableColumnResizing: true,
    columnDefs: [
    { field:'date', displayName: 'Date', width: 200, aggregationType: uiGridConstants.aggregationTypes.count  },
    { field:'notes', displayName: 'Notes', width: 65, enableFiltering: false, enableSorting: false, enableHiding: false, cellTemplate:'<a href="#" ng-click="getExternalScopes().showMe(row.entity[col.field])">View</a>' }
    ],
    data: data
}

图片:

推荐答案

这是 ui-grid(不再是 ng-grid！)的可能答案.

Here is a possible answer to ui-grid (which is not ng-grid anymore!).

不选择行的按钮的单元格模板是:

The cell template for a button that does not select the row is:

cellTemplate: '<button class="btn primary" ng-click="$event.stopPropagation();getExternalScopes().showMe(row)">Click Me</button>'

注意 ng-click 指令中的 $event.stopPropagation().这会阻碍点击到达rowTemplate的底层功能.(另请注意，除了使用 externalScopes 之外，我还没有找到将点击事件传递给控制器​​的另一种方法.我确定有更好的方法，但 ui-grid 仍然是测试版，我对它也很陌生)

Note the $event.stopPropagation() in the ng-click directive. This will hinder the click to reach the underlying functions of the rowTemplate. (Note also that I didn't found another way to pass a click event to the controller than by using externalScopes. I'm sure there is a better way but ui-grid is still beta and I'm also pretty new to it)

问题的第二部分:使用这个 headCellTemplate

Second part of your question: Use this headCellTemplate

var headCelltpl = '<div ng-class="{ \'sortable\': sortable }">' +
  '<div class="ui-grid-vertical-bar">&nbsp;</div>' +
  '<div class="ui-grid-cell-contents" col-index="renderIndex">' +
  '{{ col.displayName CUSTOM_FILTERS }}' +
  '</div>' +
  '</div>';

并将其添加到 columnDefs 中的相应列.

and add it to the respective columns in your columnDefs.

headerCellTemplate: headCelltpl

这是一个 Plunker，包含所有内容.

Here is a Plunker with everything included.

请不要告诉我你的意思是 ng-grid:-)

Please don't tell me you meant ng-grid:-)

这篇关于单击时 ng-grid/ui-grid celltemplate 会导致选择行.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！