angular – 如何将样式类添加到p-dataTable行

发布时间：2020-12-17 07:52:12 所属栏目：安全来源：网络整理

导读：我们正在使用PrimeNG 1.0.0-beta.16的p-dataTable 我想在值为true时向行添加样式. 我想出了如何用单元格做这个,但我需要整行改变它的背景. p-dataTable [hidden]="loading" [value]="timePeriods" scrollable="true" scrollHeight="400px" rowStyleClass="mi

我们正在使用PrimeNG 1.0.0-beta.16的p-dataTable

我想在值为true时向行添加样式.
我想出了如何用单元格做这个,但我需要整行改变它的背景.

<p-dataTable [hidden]="loading" [value]="timePeriods" scrollable="true" scrollHeight="400px" rowStyleClass="missingPeriod">
    <p-column field="StartDate" header="Begindatum" sortable="false">
        <template let-col let-timePeriod="rowData" pTemplate type="body">
            <span [class.missingPeriod]="!timePeriod.IsNext">{{timePeriod.StartDate | date: 'dd-MM yyyy'}}</span>
        </template>
    </p-column>
    <p-column field="EndDate" header="Einddatum" sortable="false">
        <template let-col let-timePeriod="rowData" pTemplate type="body">
            <span>{{timePeriod.EndDate | date: 'dd-MM yyyy'}}</span> 
        </template>
    </p-column>
</p-dataTable>

< span [class.missingPeriod] =“！timePeriod.IsNext”>正在工作,但rowStyleClass =“missingPeriod”不是.

请指教.

更新语法：

已更新至v1.0.1

<p-dataTable [hidden]="loading" [rowStyleClass]="customRowClass" [value]="timePeriods" scrollable="true" scrollHeight="400px">
    <p-column field="StartDate" header="Begindatum" sortable="false">
        <template let-col let-timePeriod="rowData" pTemplate type="body">
            <span [class.missingPeriod]="!timePeriod.IsNext">{{timePeriod.StartDate | date: 'dd-MM yyyy'}}</span>
        </template>
    </p-column>
    <p-column field="EndDate" header="Einddatum" sortable="false">
        <template let-col let-timePeriod="rowData" pTemplate type="body">
            <span>{{timePeriod.EndDate | date: 'dd-MM yyyy'}}</span>
        </template>
    </p-column>
</p-dataTable>

打字稿：

public customRowClass(rowData,rowIndex): string {
    console.log("In customRowClass");
    console.log(rowData);
    console.log(rowIndex);
    return "";
}

customRowClass中没有任何内容被记录.在我看来这个方法没有被调用.

rowStyleClass的工作方式与您的想法不同;它需要一个函数作为它的输入,它返回一个字符串(CSS类名).它列在 PrimeNG DataTable docs中.

在我的HTML中,我得到了：

<p-dataTable [rowStyleClass]="lookupRowStyleClass" ...>

在组件中：

lookupRowStyleClass(rowData: User) {
    return rowData.accountDisabled ? 'disabled-account-row' : '';
}

在全局CSS文件中：

/* TODO: this should really be in the component's CSS file,but it doesn't seem to apply to the PrimeNG data table properly there */
.disabled-account-row {
    /* TODO: first try this without '!important',but you might need it */
    color: silver !important;
}

如果这没有帮助,则需要升级到更新版本. PrimeNG 1.0.0 RC5截至2016年11月.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!