3 중첩 수준에서 큰 성공을 거둔 ui-grid를 사용합니다. 비즈니스는 연속 행 맨 위에 오버레이하지 않고 다음 행을 밀어 넣기 위해 확장 행이 필요합니다. 이 overflow/z-layer 기능이 ui-grid.js 파일 내에서 어떻게 제어되는지를 알지 못합니다. 이 기능을 작동시키는 방법에 대한 제안이 있으십니까? 감사!Angularjs UI-Grid - 다음 행으로 배치하지 않고 행을 확장하는 방법
알아 냈어. ui-grid.js 파일에는 28,000 줄의 하단에있는 모든 템플릿이 들어 있습니다. "ui-grid/expandableRow"에 대한 모든 html을 내 코드에서 자체 템플릿 파일로 가져 와서 일부 요구 사항을 충족하도록 수정했습니다. AngularJS와, 나는 내 자신의 이름 지정 규칙과 같은 해당 서식을 지정 서식 파일의 코드는 다음과 같습니다
expandableRowTemplate: 'AngularApp/Templates/expandableAssetsRowTemplate.html'
있다.
<div ui-grid="row.entity.subGridOptions" ui-grid-pagination ui-grid-expandable ui-grid-edit ui-grid-row-edit ui-grid-cellNav ui-grid-move-columns ui-grid-resize-columns
ng-if="expandableRow.shouldRenderExpand()"
class="expandableRow"
style="float:left; margin-top: 1px; margin-bottom: 1px"
ng-style="{width: (grid.renderContainers.body.getCanvasWidth()) + 'px' , height: row.expandedRowHeight + 'px' }">
</div>
결과에 영향을받는 다른 것은 부모 그리드의 gridOptions에서 확장 행의 높이입니다 : 내가 일을하기 위해) 몇 가지 이상한 이유로 지침 'UI-그리드 확장 행'을 제거했다 :
expandableRowHeight: 390
중첩 된 격자에는 높이 지정이 있지만이 확장 된 행 높이로 인해 부모 그리드에서 행을 올바른 높이로 확장 할 수 있습니다.
이 모든 결과로 부모 그리드의 행이 확장되고 중첩 된 그리드가 부모 행의 나머지 부분을 아래로 밀어 내려 놓습니다.
참고 : 원래 튜토리얼에있는 바닐라 expandableRowTemplate을 사용했기 때문에 제 확장이 제대로 작동하지 않았습니다. (위의 사람에 비해) 나쁜 템플릿의
샘플 : 내 경우
<div ui-grid="row.entity.subGridOptions" ui-grid-expandable
ui-grid-edit ui-grid-row-edit ui-grid-cellNav ui-grid-move-columns ui-grid-resize-column>
</div>
은 내가 myTable에라는 UI 그리드하고 하위 그리드의 일부 행이 될 수 안에 있습니다. 메인 그리드는 배열 array1로 채워집니다. array1의 각 요소에는 세부 배열이 포함될 수 있습니다.
$scope.myTable.expandableRowHeight *= (2 + row.entity.details.length) ;
row.entity는
그런 배열 1에서 소자 (주 격자의 배열)의 expandCollapse 방법이어야 전용 I는 (부 격자의 높이 속성을 설정할)이 동작을 수행 할 필요
$scope.expandCollapseRow = function(row,$event){
$event.stopPropagation();
$scope.myTable.expandableRowHeight *= (2 + row.entity.details.length) ;
$scope.gridApi.expandable.toggleRowExpansion(row.entity);
};
expandableRowHeight는 angle-ui grid의 기존 속성임을 잊지 마십시오.
당신이 이미지에 그리드의 설정에 속성을 볼 수 있습니다:
