剣道UI角度グリッド - すべてのヘッダー

Question

私は次のような構造に基づいて、剣道のグリッドを持って折りたたむ：

：私はそれは、次のページが最初にロードアップのようなものを見たいんだ

Master Group A 
     Sub Group A 
      -Data A- 
      -Data B- 
     Sub Group B 
      -Data C- 
      -Data D- 
     Sub Group C 
      -Data E- 
      -Data F- 
    Master Group B 
     Sub Group A 
      -Data G- 
      -Data H- 
     Sub Group B 
      -Data I- 
      -Data J- 
     Sub Group C 
      -Data K- 
      -Data L- 
    Master Group C 
     Sub Group A 
      -Data M- 
      -Data N- 
     Sub Group B 
      -Data O- 
      -Data P- 
     Sub Group C 
      -Data Q- 
      -Data R- 

を

Master Group A 
     Sub Group A 
     Sub Group B 
     Sub Group C 
    Master Group B 
     Sub Group A 
     Sub Group B 
     Sub Group C 
    Master Group C 
     Sub Group A 
     Sub Group B 
     Sub Group C 

私のデータは現在、1行に1つのデータ部分です。データの各行は、それ自身のデータです。 誰でもこれを行う方法を知っていますか？

• 私は剣道Angular2スラックを持っている：https://kendouiangular2.slack.com

Answer 1

それを行うためのangular2のための剣道グリッドには簡単な解決策はありません。

私は2つのアプローチを考えることができます：1つの参照/全てのグループ、サブグループおよびデータとの読み取り専用配列、そして濾過配列：あなたは、データの2つの配列を持つことができ、データ

の

1）ろ過配列サブグループ行のボタンをクリックすると、各サブグループのデータを追加/削除することができます。

次に、グリッドデータをフィルタリングされた配列にバインドし、サブグループボタンのイベントでフィルタされた配列を変更します。

2データの）CSS-のみ

シングル配列、その後、あなたのサブグループボタンのイベントに基づいて、あなたのデータラインを表示/非表示するために剣道グリッドの<tr>タグにクラスを適用します。 あなたのプロジェクト上のjQueryを持っている場合は、そのようなもので、比較的簡単にこれらのTRタグにアクセスすることができます：あなたはそれが少し少なく簡単ですjQueryのを持っていない場合は

$('.some-class-i-add-to-all-my-data-lines').parents('.k-master-row') 

。