Ng2-smart-table：是否可以显示和隐藏列？

Question

我已经设计了一个带有ng2-smart-table 的表格，但是我仍然缺少一个重要的功能。

我希望能够隐藏和显示列。

你知道ng2-smart-table 是如何工作的吗？

我无法在其他地方找到解决方案。

Answer 1

设置 = {

// Meldung wenn keine Daten gefunden wurden oder tbody leer ist

noDataMessage: 'Es wurden keine Daten gefunden',

// Aktionen

动作：假，

过滤器：假，

// Seitenzahl

pager: {
  display: true,
  perPage: 10,
},

// CRUD

add: {
  addButtonContent: '<i class="fa fa-plus" title="hinzufügen"></i>',
  createButtonContent: '<i class="fa fa-check" title="erstellen"></i>',
  cancelButtonContent: '<i class="fa fa-close" title="abbrechen"></i>',
},

edit: {
  editButtonContent: '<i class="fa fa-pencil" title="bearbeiten"></i>',
  saveButtonContent: '<i class="fa fa-floppy-o" title="speichern"></i>',
  cancelButtonContent: '<i class="fa fa-close" title="abbrechen"></i>',
  confirmSave: true,
},

delete: {
  deleteButtonContent: '<i class="fa fa-trash-o"></i>',
  confirmDelete: true,
},

Answer 2

我以这种方式从 Settings 对象中删除了属性：

//My settings
settings = {
    // Columns Specifications
    columns: {
        id: {
            title: 'Id',
            editable: 'false'
        },
        job: {
            title: 'Job Name',
            editable: 'false'
        },
        status: {
            title: 'Status',
            editable: 'false'
        },
        trigger: {
            title: 'Trigger',
            editable: 'false'
        }
    }
};

hideColumnForUser(){
    if(!this.isAdmin){
        delete this.settings.columns.job;
        delete this.settings.columns.trigger;
    }
}

我在 ngOnInit() 中调用 hideColumnForUser() 方法

Answer 3

我已经这样解决了：

我把一个属性 "show": true 设置为这样的设置

"columns": {
      "id": {
        "title": "id",
        "show": false
      },

我添加了这段代码

if (this.settings.columns["id"].hasOwnProperty("show")) {
            if (this.settings.columns["id"].show ==false) {
              delete this.settings.columns["id"];
            }
}

我不知道是否有其他方法，但它在我身边有效。

Answer 4

<!-- Übersicht Report-Daten -->

<div class="animated fadeIn">

  <!-- Tabellenstruktur für die Report-Daten -->

  <div class="row">

     <!-- Istwerte für das Monatsreporting -->

     <div class="col-md-12">
       <div class="card" id="cardbg-second">
        <div class="card-header" data-background-color="blue">
          <h4 class="title-second">ISTWERTE FÜR DAS MONATSREPORTING 2017</h4>
        </div>
        <div class="card-content table-responsive" id="body-second">
          <table class="table">
            <ng2-smart-table
              [settings]="settings"
              [source]="data"
              (editConfirm)="onSaveConfirm($event)"
              (deleteConfirm)="onDeleteConfirm($event)">
            </ng2-smart-table>
          </table>
        </div>
       </div>
     </div>
  </div>
</div>

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { Ng2SmartTableModule } from 'ng2-smart-table';

@Component({
  selector: 'reportdaten',
  templateUrl: 'reportdaten.component.html',
  styleUrls: ['./reportdaten.component.scss']
})

export class ReportDatenComponent implements OnInit {

  // Daten

  data = [
    {
      bez: 'Krankentage',
      jan: '105,0',
      feb: '120,0',
      mrz: '10,0',
      apr: '188,0',
      mai: '34,5',
      jun: '76,5',
      jul: '90,0',
      aug: '12,0',
      sep: '9,12',
      okt: '60,0',
      nov: '40,0',
      dez: '0,0',
    },
    {
      bez: 'Anzahl LE inkl Leiharbeiter',
      jan: '50,1',
      feb: '49,6',
      mrz: '48,6',
      apr: '47,1',
      mai: '22,7',
      jun: '23,0',
      jul: '87,0',
      aug: '45,0',
      sep: '32,0',
      okt: '40,0',
      nov: '21,4',
      dez: '20,2',
    },
    {
      bez: 'Gesamte Anwesenheitstage',
      jan: '2.000,0',
      feb: '4.783,0',
      mrz: '10,0',
      apr: '212,0',
      mai: '4.344,0',
      jun: '1.200,0',
      jul: '800,0',
      aug: '2.300,0',
      sep: '1.881,0',
      okt: '2.089,0',
      nov: '2.109,0',
      dez: '2.028,0',
    },
    {
      bez: 'Sollstunden GE',
      jan: '299,4',
      feb: '345,98',
      mrz: '200,0',
      apr: '329,2',
      mai: '671,5',
      jun: '400,0',
      jul: '230,8',
      aug: '700,0',
      sep: '120,0',
      okt: '280,9',
      nov: '140,0',
      dez: '40,4',
    },
  ];

  // Einstellungen

  settings = {

    // Meldung wenn keine Daten gefunden wurden oder tbody leer ist

    noDataMessage: 'Es wurden keine Daten gefunden',

    // Aktionen

    actions: {
      columnTitle: 'Aktionen',
    },

    // Seitenzahl

    pager: {
      display: true,
      perPage: 10,
    },

    // CRUD

    add: {
      addButtonContent: '<i class="fa fa-plus" title="hinzufügen"></i>',
      createButtonContent: '<i class="fa fa-check" title="erstellen"></i>',
      cancelButtonContent: '<i class="fa fa-close" title="abbrechen"></i>',
    },

    edit: {
      editButtonContent: '<i class="fa fa-pencil" title="bearbeiten"></i>',
      saveButtonContent: '<i class="fa fa-floppy-o" title="speichern"></i>',
      cancelButtonContent: '<i class="fa fa-close" title="abbrechen"></i>',
      confirmSave: true,
    },

    delete: {
      deleteButtonContent: '<i class="fa fa-trash-o"></i>',
      confirmDelete: true,
    },

    // Filter

    filter: {
      inputClass: 'filter-smart-table'
    },

    // Spalten

    columns: {
      bez: {
        title: 'Bez',
        filter: {
          type: 'default',
          config: {
            default: {
              data: this.data,
              searchFields: 'bez',
              titleField: 'bez',
            },
          },
        },
      },
      jan: {
        title: 'Jan',
        filter: false,
      },
      feb: {
        title: 'Feb',
        filter: false,
      },
      mrz: {
        title: 'Mrz',
        filter: false,
      },
      apr: {
        title: 'Apr',
        filter: false,
      },
      mai: {
        title: 'Mai',
        filter: false,
      },
      jun: {
        title: 'Jun',
        filter: false,
      },
      jul: {
        title: 'Jul',
        filter: false,
      },
      aug: {
        title: 'Aug',
        filter: false,
      },
      sep: {
        title: 'Sep',
        filter: false,
      },
      okt: {
        title: 'Okt',
        filter: false,
      },
      nov: {
        title: 'Nov',
        filter: false,
      },
      dez: {
        title: 'Dez',
        filter: false,
      },
    },
  };

  // Bestägung für speichern eines Datensatzes

  onSaveConfirm(event): void {
    if (window.confirm('Soll dieser Datensatz gespeichert werden?')) {
      event.newData['name'] += ' + added in code';
      event.confirm.resolve(event.newData);
    } else {
      event.confirm.reject();
    }
  }

  // Bestätigung für löschen eines Datensatzes

  onDeleteConfirm(event): void {
    if (window.confirm('Soll dieser Datensatz gelöscht werden?')) {
      event.confirm.resolve();
    } else {
      event.confirm.reject();
    }
  }

  constructor() { }

  ngOnInit() {
  }
}