Question

  dtOptions = {
    pagingType: 'full_numbers',
    pageLength: 5,
    processing: true
  };
  mainData = [
    {'plus':'','ID':1,'FName':'AAA','SName':'A','Place':'ID'},
    {'plus':'','ID':2,'FName':'BBB','SName':'B','Place':'SG'},
    {'plus':'','ID':3,'FName':'CCC','SName':'C','Place':'HK'},
    {'plus':'','ID':4,'FName':'DDD','SName':'D','Place':'CN'}
  ];
  getRow(row){
    console.log("data",row);
    row.expand = true;
  }

我正在使用Angular 6中的angular-datatables创建一个表。我正在尝试嵌套表，如在td的扩展上显示另一个表。但是扩展的行总是添加在主表行的顶部。

但是我想在特定行的展开上显示嵌套表，就像每行下面一样。
类似https://stackblitz.com/edit/how-to-create-drill-down-tables-using-this-library-1240。附上屏幕截图以供参考。请建议我，我所缺少的。

如果我要这样添加

 <tbody>
              <ng-template ngFor let-row [ngForOf]="mainData" let-i="index">
                  <tr class="sub_{{i}}">
                      <td (click)="getRow(row)">
                        <i class="fa fa-plus" *ngIf="!row.expand"></i>
                        <i class="fa fa-minus" *ngIf="row.expand"></i>
                      </td>
                      <td>{{row.ID}}</td>
                      <td>{{row.FName}}</td>
                      <td>{{row.SName}}</td>
                      <td>{{row.Place}}</td>
                    </tr>
                    <tr></tr>
                    <tr class="sub_{{i}} secondrow" *ngIf="row.expand">
                        <table datatable [dtOptions]="dtOptions" class="table table-striped">
                          <thead>
                            <tr>
                              <th>ID</th>
                              <th>Name</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>1</td>
                              <td>SSS</td>
                            </tr>
                          </tbody>
                        </table>
                    </tr>
              </ng-template>  
          </tbody>

嵌套行恰好位于该行的正下方，但主表的dtOptions未加载。

谢谢

  <div class="row" style="margin:0px;">
  <div class="col-md-12"><h6>Nested Table</h6></div>
  <div class="col-md-12">
      <table datatable [dtOptions]="dtOptions" class="table table-striped">
          <thead>
            <tr>
              <td></td>
              <td>ID</td>
              <td>First Name</td>
              <td>Last Name</td>
              <td>Place</td>
            </tr>
          </thead>
          <tbody>
              <ng-template ngFor let-row [ngForOf]="mainData" let-i="index">
                  <tr class="sub_{{i}}">
                      <td (click)="getRow(row)"><i class="fa fa-plus"></i></td>
                      <td>{{row.ID}}</td>
                      <td>{{row.FName}}</td>
                      <td>{{row.SName}}</td>
                      <td>{{row.Place}}</td>
                    </tr>
                    <tr class="sub_{{i}} secondrow" *ngIf="row.expand">
                        <table datatable [dtOptions]="dtOptions" class="table table-striped">
                          <thead>
                            <tr>
                              <th>ID</th>
                              <th>Name</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>1</td>
                              <td>SSS</td>
                            </tr>
                          </tbody>
                        </table>
                    </tr>
              </ng-template>  
          </tbody>
        </table>
  </div>
</div>

] 1

Answer 1

选中此https://stackblitz.com/edit/how-to-create-drill-down-tables-using-this-library-1240-cqmh8n?file=app%2Fapp.component.html

TS：

import { Component, VERSION, ViewChild } from '@angular/core';
import { DataTableDirective } from 'angular-datatables';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  version = 'Angular: v' + VERSION.full;
  dtOptions: DataTables.Settings = {};
  mainData = [];
  table;

  @ViewChild(DataTableDirective)
  private datatableElement: DataTableDirective;

  constructor() { }

  ngOnInit(): void {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
      processing: true
    };
    this.mainData = [
      { 'plus': '', 'ID': 1, 'FName': 'AAA', 'SName': 'A', 'Place': 'ID' },
      { 'plus': '', 'ID': 2, 'FName': 'BBB', 'SName': 'B', 'Place': 'SG' },
      { 'plus': '', 'ID': 3, 'FName': 'CCC', 'SName': 'C', 'Place': 'HK' },
      { 'plus': '', 'ID': 4, 'FName': 'DDD', 'SName': 'D', 'Place': 'CN' },
      { 'plus': '', 'ID': 2, 'FName': 'BBB', 'SName': 'B', 'Place': 'SG' },
      { 'plus': '', 'ID': 3, 'FName': 'CCC', 'SName': 'C', 'Place': 'HK' },
      { 'plus': '', 'ID': 4, 'FName': 'DDD', 'SName': 'D', 'Place': 'CN' }
    ];

  }

  ngAfterViewInit() {
    this.datatableElement.dtInstance.then(table => {
      console.log(table);
      this.table = table
    });
  }

  addChildTable(rowInstance) {
    const row = this.table.row(rowInstance);
    const data = this.table.row(rowInstance).data()
    console.log(data);
    if (row.child.isShown()) {
      // This row is already open - close it
      row.child.hide();
    }
    else {
      const childTable=this.getTable();
      row.child(childTable).show();
    }
  }

  getTable() {
    return `<table  class="table table-striped">
                          <thead>
                            <tr>
                              <th>ID</th>
                              <th>Name</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>1</td>
                              <td>SSS</td>
                            </tr>
                          </tbody>
                        </table>`
  }


}

HTML：

<div class="row" style="margin:0px;">
    <div class="col-md-12">
        <h6>Nested Table</h6>
    </div>
    <div class="col-md-12">
        <table datatable  class="table table-striped">
            <thead>
                <tr>
                    <td></td>
                    <td>ID</td>
                    <td>First Name</td>
                    <td>Last Name</td>
                    <td>Place</td>
                </tr>
            </thead>
            <tbody>
                <ng-container *ngFor="let row of mainData;let i = index">
                    <tr #rowInstance>
            <td (click)=addChildTable(rowInstance)><i class="fa fa-plus"></i></td>
                        <td>{{row.ID}}</td>
                        <td>{{row.FName}}</td>
                        <td>{{row.SName}}</td>
                        <td>{{row.Place}}</td>

                    </tr>
                </ng-container>
            </tbody>
        </table>
    </div>
</div>

Answer 2

选中此https://npmjs.com/package/angular-tree-table

我已经开发了此插件，用于显示如下所示的可扩展表格，可以在NPM页上查看完整的配置文档

angular 6中的angular-datatables，嵌套行对齐问题和dtOptions未加载

2 个答案: