.html
<p-dataTable emptyMessage="{{tbldatamsg}}" [value]="dataset" scrollable="true" [style]="{'overflow':'hidden!important'}"
[responsive]="true" [stacked]="stacked" [filters]="GlobalFilterValue" [rows]="20" sortMode="multiple" [(selection)]="selectedRow" selectionMode="multiple"
[resizableColumns]="true" columnResizeMode="expand" [paginator]="true" [globalFilter]="gb" [rowsPerPageOptions]="[10,15,20,25]"
appendTo="body" #dt>
<p-column styleClass="checkbox ui-resizable-column" [style]="{'width': 'auto'}" selectionMode="multiple"></p-column>
<p-column *ngFor="let col of cols;let j=index;" [style]="{'width':'130px'} "[field]="col.field" [header]="col.header" [sortable]="true"
[filter]="true" filterPlaceholder="Search" (mouseleave)="hoveredIndex=null" filterPlaceholder="Search" appendTo="body">
<ng-template let-row="rowData" let-i="rowIndex" pTemplate="body">
<!-- <div [pTooltip]="row[col.field]" [id]="col.field"> -->
<span *ngIf="col.field==='modified'" (mouseover)="passIndexValue(i) ">
<a style="color:black;">{{row[col.field]}}</a>
</span>
<p-button *ngIf="col.field==='modified' && hoveredIndex===i && !displayDialog " appendTo="body" icon="fa fa-fw fa-eye" (click)="onRowSelect($event,'View',i)"></p-button>
<p-button *ngIf="col.field==='modified' && hoveredIndex===i && !displayDialog" appendTo="body" icon="fa fa-fw fa-edit" (click)="onRowSelect($event,'Edit',i)" ></p-button>
<p-button *ngIf="col.field==='modified' && hoveredIndex===i && !displayDialog " appendTo="body" icon="fa fa-fw fa-trash" (click)="onRowSelect($event,'Delete',i)"></p-button>
<span *ngIf="col.field==='suggested_Value'">
<a style="color:black;">{{row[col.field]}}</a>
</span>
<!-- set String -->
<span (mouseover)="hoveredIndex=null" style="text-align:left;" *ngIf="col.datatype!='int' && col.datatype!='float' && col.field!='modified' && col.field!='suggested_Value'" >
{{row[col.field]}}
</span>
<!-- set int -->
<span (mouseover)="hoveredIndex=null" style="text-align:right;float: right" *ngIf="col.datatype=='int' || col.datatype=='float' && col.field!='modified' && col.field!='suggested_Value'" >
{{row[col.field]}}
</span>
</ng-template>
<!--<ng-template pTemplate="filter" let-colvalue>
<input *ngIf="col.field==='symbol'" type="text" pInputText style="width:100%" [(ngModel)]="SymbolFilterValue" (onChange)="ApplySymbolFilter(dt,SymbolFilterValue,col.field,col.filterMatchMode)" (input)="ColumnFilter(dt, $event.srcElement.value, col.field, col.filterMatchMode)" class="ui-column-filter"/>
<input *ngIf="col.field!='symbol'" type="text" pInputText style="width:100%" (input)="ColumnFilter(dt, $event.srcElement.value, col.field, col.filterMatchMode)" class="ui-column-filter"/>
</ng-template> -->
</p-column>
</p-dataTable>
答案 0 :(得分:0)
您可以根据以下hidden
对象使用col
属性:
...
<p-column
*ngFor="let col of cols;let j=index;"
[style]="{'width':'130px'}"
[field]="col.field"
[header]="col.header"
[sortable]="true"
[hidden]="!col.isVisible" <======== add your condition here
...
答案 1 :(得分:0)
已解决。
我已经使用css display:none;
解决了<p-column *ngFor="let col of cols;let j=index;"
[style]="{'width':'130px','display': col.display}" <<--add condition
[field]="col.field"
[header]="col.header"
.ts
getColumns() {
let ColumnNamePath = './assets/Grid Column Names/Oats-Exception-Summary-Columns.json';
this.SharedHttpClientService.getJson(ColumnNamePath)
.subscribe(column => {
this.columnJson = [];
for (var i = 0; i < column.length; i++) {
this.cols[i] =
{ header: column[i].UI_ColumnName, field: column[i].MappingKey, datatype: column[i].DataType, label: column[i].UI_ColumnName, value: column[i].DB_ColumnName ,display: column[i].Display}
}
}, error => console.log(error));
}
column.json
[
{
"Display": "true",
"UI_ColumnName": "End Of Record Marker",
"DB_ColumnName": "END_OF_RECORD_MARKER",
"DataType": "String",
"MappingKey": "end_Of_Record_Marker"
},
{
"Display": "true",
"UI_ColumnName": "MPID",
"DB_ColumnName": "MPIDS",
"DataType": "String",
"MappingKey": "MPID"
},
{
"Display": "true",
"UI_ColumnName": "Explanation",
"DB_ColumnName": "Explanation",
"DataType": "String",
"MappingKey": "explanation"
},
{
"Display": "true",
"UI_ColumnName": "Mpid OATS Exc ID",
"DB_ColumnName": "MPID_OATS_Exc_ID",
"DataType": "int",
"MappingKey": "MPID_OATS_Exc_ID"
},
{
"Display": "none",
"UI_ColumnName": "OMSOrder ID",
"DB_ColumnName": "OMSOrderID",
"DataType": "int",
"MappingKey": "OMSOrderID"
},
{
"Display": "none",
"UI_ColumnName": "Report Header ID",
"DB_ColumnName": "Report_Header_ID",
"DataType": "int",
"MappingKey": "report_Header_ID"
}
]