2014-10-20 5 views
3

ahref 링크에 celltemplate을 사용하면 RowSelection을 활성화했기 때문에 링크가 강조 표시되면 강조 표시됩니다. 그러나 링크를 클릭 할 때 강조 표시 할 행을 원합니다. 링크.클릭하면 ng-grid/ui-grid celltemplate이 선택됩니다.

또한 아래 그림에서 작은 화살표를 제거하여 해당 열에 대해 Menuitem을 표시 할 수 없습니까?

코드 :

$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

+0

당신이 [plunker] (HTTP를 줄 수 row.setSelectedfalse에 변경입니다 :-) NG 그리드 의미 .co /) (또는 [피들] (http://jsfiddle.net/), [jsbin] (http://jsbin.com/), [codepen] (http://codepen.io/pen/). ..기타)? 질문을 해결하는 데 도움이됩니다. – allyusd

+0

다음을 명확히하십시오 : ng-grid 또는 ui-grid? 그 차이는 처음 보일 때와 같이 사소한 것이 아닙니다. – mainguy

답변

6

은 UI를 그리드에 가능한 대답을합니다.

행을 선택하지 않는 버튼 셀 템플릿은 다음과 같습니다

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

참고 NG 클릭 지침에 $event.stopPropagation(). 이렇게하면 클릭이 rowTemplate의 기본 함수에 도달하는 것을 방해합니다. (externalScopes를 사용하는 것보다 컨트롤러에 click 이벤트를 전달하는 또 다른 방법을 찾지 못했음을 참고하십시오.) 더 나은 방법이 있지만 UI 그리드가 여전히 베타 버전이며 꽤 익숙합니다. 귀하의 질문의)

두 번째 부분은이 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입니다. // plnkr :

말하지 마십시오 당신은

+1

행 강조 표시 수정 주셔서 감사합니다 .. ColumnDef : enableColumnMenu : false - 아마도 당신의 답변을 업데이 트하고 싶지만 그것을 사용하여 두 번째 질문 (아래쪽 화살표)을 비활성화 할 수 있습니다 :) 당신 덕분에 다시 감사합니다 – rubberchicken

+0

아니, 너 대답은 메뉴에 관한 것이 더 좋습니다. 새로운 설명서에는 많은 읽을 거리가 있습니다. -/유용한 입력을 주셔서 감사합니다! – mainguy

+0

플 런커가 현재 ui-grid에서 작동하지 않습니다. – bhantol

0

간단한 solution

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

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