ng-grid/ui-grid celltemplate on click causes row to be selected.

问题:

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?

Code:

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

Pic:

回答1:

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>' 

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)

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

and add it to the respective columns in your columnDefs.

headerCellTemplate: headCelltpl 

Here is a Plunker with everything included.

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

回答2:

The simple solution is change the row.setSelected to false

cellTemplate: '<button class="btn primary" ng-click="grid.appScope.deSelectRow(row)">Click Me</button>'  $scope.deSelectRow = function(row) {      row.setSelected(false);   }; 

文章来源: ng-grid/ui-grid celltemplate on click causes row to be selected.