如何解决如何在Turbo表PrimeNg中显示下拉选择状态?
我设计了PrimeNg涡轮表<p-table>
,可以通过多个下拉列表和自定义过滤器进行排序。我已决定支持通过存储的用户设置。
但是,我在填写<p-calendar>
和<p-multiSelect>
的默认值时遇到问题。我知道如何通过用户设置的状态填充input
(因为它们位于PrimeNg documentation中)。但是我没有找到关于<p-calendar>
和<p-multiSelect>
的稳定状态的任何信息。
我需要[value]="dt.filters['description']?.value"
中的<input>
之类的<p-multislect>
来获得用户稳定的状态;我需要知道如何影响输入组件...
<input pInputText
type="text"
[style]="{'width':'100%'}"
(input)="dt.filter($event.target.value,'description','contains')"
[value]="dt.filters['description']?.value" <<=== Need this for calendar and multislect
placeholder="Description">
<p-multiSelect [options]="statuses"
[style]="{'width':'100%'}"
(onChange)="dt.filter($event.value,'status','in')"
placeholder="Status">
</p-multiSelect>
在official documentation,GitHub implementation thread或我已审查的多个StackOverflow问题中,我都找不到用于过滤组件的任何东西。
有人可以帮助我吗?有没有一种方法可以实现日历和多选状态?还是应该通过自定义解决方案来处理?
我附上p表以了解一个想法:
<p-table
#dt
[value]="records"
sortMode="multiple"
[paginator]="true"
[rowsPerPageOptions]="rowsPerPageTable"
[rows]="rowsPerTable"
[showCurrentPageReport]="true"
[(first)]="page"
[(selection)]="selectedRecordsInfo"
styleClass="p-datatable-striped"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
stateStorage="session"
stateKey="p-table-USER_ID"
>
<ng-template pTemplate="header">
<tr class="ui-table-thead">
<th [ngStyle]="{'width':'14%'}" pSortableColumn="createdDate">Created <p-sortIcon field="createdDate"></p-sortIcon></th>
<th [ngStyle]="{'width':'14%'}" pSortableColumn="type">Types <p-sortIcon field="type"></p-sortIcon></th>
<th [ngStyle]="{'width':'14%'}" pSortableColumn="status">Status <p-sortIcon field="status"></p-sortIcon></th>
<th [ngStyle]="{'width':'29%'}" pSortableColumn="description">Description <p-sortIcon field="description"></p-sortIcon></th>
<th [ngStyle]="{'width':'29%'}" pSortableColumn="creatorNames">Creators <p-sortIcon field="creatorNames"></p-sortIcon></th>
</tr>
<tr class="ui-table-thead">
<th>
<p-calendar (onSelect)="onDateSelect($event)"
[style]="{'width':'100%'}"
selectionMode="range"
[readonlyInput]="true"
(onClearClick)="onDateClear()"
[showButtonBar]="true"
placeholder="Created Date"
class="p-column-filter"
dateFormat="yy-mm-dd"></p-calendar>
</th>
<th>
<p-multiSelect [options]="types"
[style]="{'width':'100%'}"
(onChange)="dt.filter($event.value,'type','in')"
placeholder="Type"></p-multiSelect>
</th>
<th>
<p-multiSelect [options]="statuses"
[style]="{'width':'100%'}"
(onChange)="dt.filter($event.value,'in')"
placeholder="Status"></p-multiSelect>
</th>
<th>
<input pInputText
type="text"
[style]="{'width':'100%'}"
(input)="dt.filter($event.target.value,'contains')"
[value]="dt.filters['description']?.value"
placeholder="Description">
</th>
<th>
<p-multiSelect [options]="creators"
[style]="{'width':'100%'}"
(onChange)="dt.filter($event.value,'creatorNames','customFindCreatorFilter')"
placeholder="Creators"
optionLabel="name">
</p-multiSelect>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData>
<tr ng-repeat="rowData in let-rowData">
<td>{{ rowData.createdDate }}</td>
<td>{{ rowData.type }}</button></td>
<td>{{ rowData.status }}</td>
<td>{{ rowData.description }}</td>
<td>{{ rowData.creatorNames.join(",") }}</td>
</ng-template>
</p-table>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。