首页 文章

隐藏特定行的展开/折叠图标

提问于
浏览 次
1

当某个条件为真时，我想隐藏网格中的展开图标 . 例如，如果我的表数据在底层数组中没有任何值 . 我知道我可以通过将 p-column => expander 设置为 false 来禁用该图标但是我没有找到任何方法来检索 <p-column> 元素中的当前行数据 .

<p-dataTable [value]="testData" [expandableRows]="true">
  <p-column expander="true"></p-column>
  <p-column header="name">
    <template pTemplate let-row="rowData">
      {{row.name}}
    </template>
  </p-column>

  <template let-data pTemplate="rowexpansion">
    {{data.values | json}}
    <ul>
      <li *ngFor="let v of data.values">{{v | json}}</li>
    </ul>
  </template>
</p-dataTable>

this.testData = [
      {name: 'a', values: [
        'a', 'b', 'c'
      ]},
      {name: 'b', values: []}, // I don't need an expand icon when there are no values
    ];

enter image description here
使用的Plunker：https://plnkr.co/edit/JMMMMNLekNpNa393hHcz?p=preview

angular primeng

2 回答

  • 0
    <p-column>
     <ng-template let-row="rowData" pTemplate="body">
        <a *ngIf="true/false" (click)="YOUR_TABLE_ID.toggleRow(row)">Toggle</a>
     </ng-template>
  </p-column>

    我有同样的问题，并通过此模板列找出它 .

    注意这是针对Angular 4，只需将ng-template更改为ng2的模板 .

    回复于
  • 1

    我还需要显示/隐藏我的行扩展器按钮/图标，具体取决于我的行的某些条件 . 这就是我做到的 .

    <p-dataTable [value]="students" selectionMode="single" [responsive]="true" [lazy]="false" resizableColumns="true" expandableRows="true" [loading]="dataTableDataLoading" class='primeNGDataTable' [scrollable]="true" scrollHeight="600px" #dtStudents>
   <p-column [style]="{'width':'40px'}">
      <ng-template let-data="rowData" pTemplate="body">
         <a *ngIf="data.addresses !== null && data.addresses.length > 0" (click)="dtStudents.toggleRow(data)">
            <i *ngIf="!dtStudents.isRowExpanded(data)" class="fa fa-chevron-circle-right" [style]="{'margin-top':'5px'}"></i>
            <i *ngIf="dtStudents.isRowExpanded(data)" class="fa fa-chevron-circle-down"></i>
         </a>
      </ng-template>
   </p-column>
   <p-column header="ID" field='id' [style]="{'width': '80px'}"></p-column>
   <p-column header="First Name" field='fname' [style]="{'width': '120px'}"></p-column>
    <ng-template let-data pTemplate="rowexpansion">
       <p-dataTable selectionMode="single" [value]="data.addresses" [lazy]="false" [responsive]="true">
          <p-column header="Address Line 1" field='addressLn1' [style]="{'width': '80px'}"></p-column>
          <p-column header="Address Line 2" field='addressLn2' [style]="{'width': '80px'}"></p-column>
          <p-column header="City" field='city' [style]="{'width': '80px'}"></p-column>
          <p-column header="State" field='state' [style]="{'width': '80px'}"></p-column>
          <p-column header="Zip" field='zip' [style]="{'width': '80px'}"></p-column>
       </p-dataTable>
   </ng-template>           
 </p-dataTable>
    回复于

相关问题