我设计了一个带有 的表格ng2-smart-table，但我仍然缺少一个重要功能。
我希望能够隐藏和显示列。
你知道这是如何工作的ng2-smart-table吗？
我无法在其他地方找到解决方案。
问问题
6914 次
4 回答
2
我已经这样解决了：
我把一个属性 "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"];
}
}
我不知道是否还有其他方法，但它在我身边有效。
于 2018-04-12T15:29:40.787 回答
2
设置 = {
// 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,
},
于 2018-02-08T13:39:40.913 回答
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() 方法
于 2018-02-20T13:31:40.837 回答
1
<!-- Ü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() {
}
}于 2018-01-28T11:27:25.883 回答