[英]how do I show/hide columns in ng2 smart table using checkboxes
我想了解如何使用以下代码显示/隐藏列。
TS 文件 -
import { Component, OnInit } from '@angular/core';
import { TableService } from './table.service';
import { Issue } from './issues';
import { CheckboxControlValueAccessor } from '@angular/forms';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
constructor(private tservice: TableService) { }
characters: Issue[];
settings = {
columns: {
id: {
title: 'ID',
editable: false
},
description: {
title: 'Description'
},
severity: {
title: 'Severity',
editor: {
type: 'list',
config: {
selectText: 'Select',
list: [
{ value: 'Minor', title: 'Minor' },
{ value: 'Major', title: 'Major' },
{ value: 'Critical', title: 'Critical' },
],
},
},
},
status: {
title: 'Status',
editor: {
type: 'list',
config: {
selectText: 'Select',
list: [
{ value: 'Open', title: 'Open' },
{ value: 'In progress', title: 'In progress' },
{ value: 'Closed', title: 'Closed' },
],
},
},
},
created: {
title: 'Created'
},
resolved: {
title: 'Resolved'
},
}
};
ngOnInit() {
this.tservice.getCharacters().subscribe((data: Issue[]) => {
this.characters = data;
});
}
}
HTML 代码 -
<p>Issue Tracker</p>
<ul>
<li><input type="checkbox" [(ngModel)]=showIssueId/> ID </li>
<li><input type="checkbox" [(ngModel)]=showDesc/> Description</li>
<li><input type="checkbox" [(ngModel)]=showSeverity/> Severity</li>
<li><input type="checkbox" [(ngModel)]=showStatus/> Status</li>
<li><input type="checkbox" [(ngModel)]=showCreated/> Created</li>
<li><input type="checkbox" [(ngModel)]=showResolved/> Resolved</li>
</ul>
<button class="updateColumn" title="Update Columns" (click)="updateColumns()">Update Table</button>
<ng2-smart-table [settings]="settings" [source]="characters">
</ng2-smart-table>
我想了解如何使用以下代码显示/隐藏列。
TS档案-
import { Component, OnInit } from '@angular/core';
import { TableService } from './table.service';
import { Issue } from './issues';
import { CheckboxControlValueAccessor } from '@angular/forms';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
constructor(private tservice: TableService) { }
characters: Issue[];
settings = {
columns: {
id: {
title: 'ID',
editable: false
},
description: {
title: 'Description'
},
severity: {
title: 'Severity',
editor: {
type: 'list',
config: {
selectText: 'Select',
list: [
{ value: 'Minor', title: 'Minor' },
{ value: 'Major', title: 'Major' },
{ value: 'Critical', title: 'Critical' },
],
},
},
},
status: {
title: 'Status',
editor: {
type: 'list',
config: {
selectText: 'Select',
list: [
{ value: 'Open', title: 'Open' },
{ value: 'In progress', title: 'In progress' },
{ value: 'Closed', title: 'Closed' },
],
},
},
},
created: {
title: 'Created'
},
resolved: {
title: 'Resolved'
},
}
};
ngOnInit() {
this.tservice.getCharacters().subscribe((data: Issue[]) => {
this.characters = data;
});
}
}
HTML代码-
<p>Issue Tracker</p>
<ul>
<li><input type="checkbox" [(ngModel)]=showIssueId/> ID </li>
<li><input type="checkbox" [(ngModel)]=showDesc/> Description</li>
<li><input type="checkbox" [(ngModel)]=showSeverity/> Severity</li>
<li><input type="checkbox" [(ngModel)]=showStatus/> Status</li>
<li><input type="checkbox" [(ngModel)]=showCreated/> Created</li>
<li><input type="checkbox" [(ngModel)]=showResolved/> Resolved</li>
</ul>
<button class="updateColumn" title="Update Columns" (click)="updateColumns()">Update Table</button>
<ng2-smart-table [settings]="settings" [source]="characters">
</ng2-smart-table>
this.settings = { columns: { ID: { title: 'ID', type: 'html', valuePrepareFunction: (cell: any, row: any) => { return `<p class="ID"> ${cell} </p>` }, }, }, }
:host /deep/ ng2-smart-table > table .ID { display: none; } :host /deep/ ng2-smart-table > table td:last-child { display: none; }
你可以用最后一个孩子来定位 ID。 在这个例如。 ID 是表中的最后一列。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.