Angular ng-grid를 사용하여 Expand-Collaspe

안녕하세요 저는 열 데이터를 클릭 할 때/collaspe 행을 확장하는 표를 만들려고합니다. 내 그리드Angular ng-grid를 사용하여 Expand-Collaspe

첫 공연에만 첫 번째 열에 데이터와 다른 모든 컬럼 데이터 모양입니다 비어 있지만 자신의 헤더를 표시합니다.
다음 첫 번째 열의 '+'아이콘을 클릭하면 다음 행에 확장이고 두 번째 열 데이터는 표시되며 모든 remaing은 공백입니다.
다음으로 두 번째 열의 '+'아이콘을 클릭하면 펼쳐지고 세 번째 열 데이터가 표시되며 모든 remaing은 비어 있습니다.
등등 ... 나는 첫 번째 레벨을 만들려고이를 위해

내 샘플입니다 - http://plnkr.co/edit/p7NHNCRiewHAvEEuByyK?p=preview

내 샘플 코드입니다 -

$scope.myData = [{icon:"",Domain: "Moroni", project:"" }, 
{icon:"",Domain: "Tiancum", project:"" }, 
{icon:"",Domain: "Jacob", project:"" }, 
{icon:"",Domain: "Nephi", project:"" }, 
{icon:"",Domain: "Enos", project: ""}]; 
$scope.gridOptions = { 
    data: 'myData', 
    columnDefs: [{ 
     field: 'icon', 
     displayName: '', 
     cellTemplate: '<div><i class="fa fa-plus-square" aria-hidden="true" ng-click="foo(row.entity.Domain)" ng-bind="row.getProperty(col.field)">></i></div>' 
     },{ 
     field: 'Domain', 
     displayName: 'Domain', 
     cellTemplate: '<div ng-click="foo(row.getProperty(col.field))" ng-bind="row.getProperty(col.field)"></div>' 
     }, { 
     field: 'project', 
     displayName: 'project' 
     } 

    ] 
    };

내가 확장 생성하는 방법을 제안하십시오/collaspe functionlity와 Angular-Grid (ng-grid) 만 사용하고 싶습니다.

출처

2017-11-20 parita porwal

난 당신이

UI-grid TreeView는 각 모듈에 'ui.grid.treeView'을 추가 할 생각합니다.

그리드 템플릿 :

<div id="grid1" ui-grid="gridOptions" ui-grid-tree-view class="grid"></div>

Demo Plunker

출처

2017-11-20 09:30:22

UI 그리드는 무료 또는 유료입니까 ?? –

@paritaporwal 그게 무료 –

나에 따라 UI를 사용자 정의하는 방법? –

Angular ng-grid를 사용하여 Expand-Collaspe

답변

관련 문제