角度に基づくツリー型セカンダリテーブルを実現する

角度に基づくツリー型セカンダリテーブルを実現する

まず効果を見てみましょう:

コード:

1.html

  <div class="userContent_content">
    <div>
      <テーブル>
        <tr>
          <td>ノード名</td>
          <td>ノード管理 IP</td>
          <td>ノードログイン名</td> 
          <td>ノードログインパスワード</td> 
        </tr>
        // ng-container を空のタグとして使用して、レビュー要素に見つからない for または if イベントを配置できるようにします <ng-container *ngFor="let item of currentTotalList,let i = index">
          <tr>
            <td style="color: #04AEB4;cursor: ポインター;" class="img">
              <div>
                <div>{{item.name} </div>
                <div>
        // 以下は矢印の展開と折りたたみを切り替える矢印の画像です。現在のクリック インデックスがリスト インデックスと等しいかどうかを判断し、等しい場合は展開され、等しくない場合は折りたたまれます <img (click)="clickShowChildList(i,item.name)"
                    [attr.src]="i == currentClickOpenIndex?'../../assets/resource/img/bottom.png':'../../assets/resource/img/right.png'">
                </div>
              </div>
            </td>
            <td>{{item.ip} </td>
            <td>{{item.ユーザー名}}</td>
            <td>{{item.パスワード}}</td>
          </tr>
        // ng-container タグを再度使用して、テーブルの子項目をネストします <ng-container *ngFor="let childItem of item.nodeList, let j = index">
        // for ループと if 判定は同じタグ内に共存できないため、隠しイベント if は tr タグ内に配置されます。現在クリックされているインデックスがリストのインデックスと一致しているかどうかを判定し、等しい場合は折りたたまれ、等しくない場合は表示されます。
 
            <tr *ngIf="i == 現在のクリックオープンインデックス">
              <td style="color: #04AEB4;cursor: ポインター;" class="img">
                <div>
                  <div>
                    {{childItem.masterIp}} </div>
                </div>
              </td>
              <td>{{childItem.ip}}</td>
              <td>{{childItem.ユーザー名}}</td>
              <td>{{childItem.password}}</td>
            </tr>
          </ng-コンテナ>
        </ng-コンテナ>
 
      </テーブル>
    </div>
    
  </div>

2. 少ない

      .userContent_content{
        幅: 100%;
        高さ: calc(~"100% - 60px");
        オーバーフロー:自動;
        >div:n番目の子(1){
          >表{
            幅: 100%;
            tr{
              td{
                幅: 25%;
                テキスト配置: 中央;
                フォントサイズ: 14px;
                色: #fff;
                パディング: 16px 0px;
                ボックスの影: 0 1px #333;
              }
            }
            .img {
              >div {
                幅: 100%;
                ディスプレイ: フレックス;
                位置: 相対的;
  
                >div:n番目の子(1) {
                  幅: 85%;
                  空白: ラップなし;
                  テキストオーバーフロー: 省略記号;
                  -o-テキストオーバーフロー:省略記号;
                  オーバーフロー: 非表示;
                  マージン: 0 自動;
  
                }
              }
  
              画像 {
                高さ: 10px !重要;
                幅: 10px !重要;
                左マージン: 0 !重要;
                位置: 絶対;
                右: 0;
                上: 3px;
              }
            }
          }
        }
  
        >div:n番目の子(2){
          高さ: 80px;
          幅: 90%;
          ディスプレイ: フレックス;
          アイテムの位置を中央揃えにします。
          マージン: 0 自動;
          コンテンツの端揃え: flex-end;
          #ページ{
            表示: テーブル;
          }
        }
      }

3.js

(1) currentTotalListテーブルデータの形式は次のようになります(シミュレーションデータを自分で記述することもできます)。

(2)現在のクリックインデックス変数currentClickOpenIndexを-1に初期化する

(3)は展開と折りたたみの矢印のクリックイベントです。

  クリック表示子リスト = (i, 項目) =>{
    console.log(i,this.currentClickOpenIndex)
    if(this.currentClickOpenIndex==i){
      this.currentClickOpenIndex = -1
    }それ以外{
      this.currentClickOpenIndex = i
    }
  }

そして完成です...

Angular をベースにしたツリー型セカンダリ テーブルの実装に関するこの記事はこれで終わりです。Angular のツリー型セカンダリ テーブルに関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • AngularJS は、テーブル テーブル td セルをクリックして入力ボックス/編集可能な状態を変更する例を実装します。
  • AngularJS ファジークエリ機能実装コード (フィルタコンテンツ ドロップダウンメニュー ソート フィルタ センシティブ文字 検証判定 テーブル情報の追加)
  • AngularJS での基本的なテーブル操作の例
  • Angular テーブル アーティファクト ui-grid アプリケーションの詳細な説明
  • Angularはフォームに入力されたデータをテーブルにレンダリングします
  • AngularJS はテーブルの追加、削除、変更、クエリを実装します (フロントエンドのみ)

<<:  PostgreSQL データベースにおける varchar、char、text の比較に関する簡単な説明

>>:  Dockerイメージの圧縮と最適化操作

推薦する

React Router 5.1.0 はページジャンプナビゲーションを実装するために useHistory を使用します

目次1. withRouterコンポーネントを使用する2. ルートタグを使用するReactRoute...

CSS でベジェ曲線の実装を反転する方法

まずは、以前書いた CSS カルーセルアニメーション効果を見てみましょう。アニメーションの遷移をスム...

MySQLの自動増分IDについて知っておくべきこと

はじめに: MySQL を使用してテーブルを作成する場合、通常は自動インクリメント フィールド (A...

Javascript での JSBridge に関する予備的研究

目次JSBridgeの起源JSBridgeの双方向通信原理JSはネイティブを呼び出すネイティブコール...

CSS モジュールソリューション

CSS のモジュール ソリューションは、JS のモジュール ソリューションと同じくらい多く存在すると...

画像ソーシャルネットワーキングサイトのUIアプリケーションの比較分析(図)

私たちの生活、仕事、勉強において、ソーシャル ネットワークは徐々に将来のインターネット発展のトレンド...

Vue ルーティングフォールバックに最適なソリューション (vue-route-manager)

目次ルーティングマネージャー背景はじめる問題を解決する方法要約するルーティングマネージャー各ジャンプ...

フォームのデフォルトの送信方法を変更する方法

htmlのデフォルトの送信方法は、postではなくgetです。postに変更したい場合は、 meth...

HTMLバージョン宣言DOCTYPEタグ

通常のウェブサイトのソースコードを開くと、ソースコードは<!DOCTYPE htmlで始まる必...

CentOS6.9+Mysql5.7.18 ソースコードのインストール詳細チュートリアル

CentOS6.9+Mysql5.7.18 ソースコードのインストールでは、以下の操作を root ...

Mysql 5.7.19 無料インストール版 (64 ビット) の設定方法に関する詳細なチュートリアル

公式サイトから mysql-5.7.19-winx64 をダウンロードします。これはシステムの 64...

Dockerコンテナデータボリュームの原理と使用法の分析

コンテナデータボリュームとはデータがコンテナ内にある場合、コンテナを削除するとデータは失われます。例...

モバイル署名機能を実装するJavaScript

この記事では、モバイル署名機能を実装するためのJavaScriptの具体的なコードを参考までに共有し...

大規模な MySQL テーブルに対する count() の実装を最適化しました

以下は、B+ ツリーのデータ構造と実験結果からの推測に基づいた私の判断です。間違いがあればご指摘くだ...

Linux/Docker で System.Drawing.Common を使用する

序文プロジェクトを .net core に移行した後、 System.Drawing.Commonコ...