单击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仍然是beta版,我对此也很陌生)
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"> </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
这是一个柱塞,其中包含所有内容.
Here is a Plunker with everything included.
请不要告诉我你的意思是ng-grid:-)
Please don't tell me you meant ng-grid:-)
这篇关于单击ng-grid/ui-grid celltemplate会导致选择行.的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!