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

我已經通過以下方式從“設置”對象中刪除了屬性：

//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”：像這樣的設置正確

"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() { } }