2017-11-20 2 views
0

こんにちは私は、列データをクリックすると、/ collaspe行を展開するグリッドを作成しようとしています。 私のグリッドはAngular ng-gridを使用したExpand-Collaspe

  • まずショーのみ、最初の列のデータと他のすべての列のデータのように見えるです 空白であるが、そのヘッダがショーです。
  • 次の行の「+」アイコンをクリックすると、次の行には が展開され、2番目の列のデータが表示され、すべてのリマイングは空白になります。
  • 2番目の列の '+'アイコンをクリックすると、それが展開され、 3番目の列のデータが表示され、すべてのリマイングは空白です。このため
  • ように...

私が最初にレベルを作成しようと、私のサンプルがある - 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)だけを使いたい。

答えて

0

私はあなたがUI-grid TreeView

は、角のモジュールに'ui.grid.treeView'を追加したいと考えています。

あなたのグリッドテンプレート:

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

Demo Plunker

+0

UIグリッドは、無料または有料である?? –

+0

@paritaporwalその無料 –

+0

私に合わせてui-gridをカスタマイズするには? –

関連する問題