点击时的ng-grid / ui-grid celltemplate会导致选择行。

时间:2014-10-20 17:58:30

标签: ng-grid angular-ui-grid

当我使用celltemplate进行ahref链接时,一旦链接被点击,该行会突出显示,因为我已启用RowSelection ...但我不希望在点击链接时突出​​显示该行...如果在任何地方单击该行但是链接。

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

代码:

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

图: enter image description here

2 个答案:

答案 0 :(得分:6)

这是ui-grid的可能答案(不再是ng-grid!)。

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

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

请注意ng-click指令中的$event.stopPropagation()。这将阻止点击到达rowTemplate的底层函数。 (另请注意,我没有找到另一种方法将click事件传递给控制器​​,而不是使用externalScopes。我确信有更好的方法,但是ui-grid仍然是测试版,我也是新手)

问题的第二部分:使用此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中的相应列。

headerCellTemplate: headCelltpl

这是一个包含所有内容的Plunker

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

答案 1 :(得分:0)

简单的solution会将row.setSelected更改为false

cellTemplate: '<button class="btn primary" ng-click="grid.appScope.deSelectRow(row)">Click Me</button>'

$scope.deSelectRow = function(row) {
     row.setSelected(false);
  };