primeng p-table: virtualScroll模式中延迟加载的单元格边框可见性
primeng p-table是一个用于构建响应式Web应用程序的开源UI组件库。它提供了丰富的UI组件，其中之一是p-table，它是一个数据表格组件。virtualScroll模式是p-table的一个特性，它允许在处理大量数据时进行快速和高效的渲染。
在virtualScroll模式中，延迟加载的单元格边框可见性是指在滚动时，p-table只渲染当前可见区域的单元格，而非全部数据。这样可以显著减少页面加载时间和内存消耗。当滚动到新的可见区域时，p-table会动态加载并渲染新的数据。
延迟加载的单元格边框可见性是指在virtualScroll模式下，只有可见的单元格边框会被渲染并显示，而不可见的单元格边框则不会被渲染和显示。这种优化措施可以提高页面性能和用户体验。
p-table的virtualScroll模式适用于需要处理大量数据的场景，例如数据报表、数据分析等。它可以提供流畅的滚动和快速的数据加载，使用户可以高效地浏览和操作大型数据集。
对于primeng p-table的virtualScroll模式中延迟加载的单元格边框可见性，腾讯云没有直接相关的产品推荐链接。但腾讯云提供了一系列云计算服务，如云服务器、云数据库、云存储等，可以帮助用户构建和部署基于云计算的应用程序。您可以参考腾讯云官方网站（https://cloud.tencent.com/）了解更多关于腾讯云的产品和服务。
相关·内容
在惰性加载模式下滚动时，primeng表显示为空单元格，并且所有单元格边界都可见。但在我的应用程序中尝试时，我只能看到当前加载的单元格。只有在加载完内容后，表格才会显示整个单元格，如图所示： ? 如何做到这一点？ ? 我使用的是primeng示例中的标准p表，没什么特别的。和src\styles.css看起来像这样： <p-table [columns]="cols" [value]="virtualCars" [scrollable]="true" [rows]="20" scrollHeight="45
浏览 37提问于2019-03-25得票数 0
我正在实现primeNG turbo表。我可以在实现延迟加载的同时实现它。我无法获取滚动事件。如何在我的方法中获取滚动事件。下面是我尝试过的内容。
<p-table #dt
dataKey="id"
[columns]="columns"
[value]="gridData"
[scrollable]="true"
sortMode="single"
scrollHeight=
浏览 2提问于2018-05-11得票数 2
我们正在使用带有virtualScroll = true和lazy = true的PrimeNG <p-table>组件。但它在以下情况下不起作用。 假设总共有100条记录，限制为10。用户滚动并看到偏移量为50的项目，然后单击该项目并转到该项目的详细页面。现在，当用户单击浏览器后退按钮时，我需要将他带回他在<p-table>中查找的相同页面，为此，我设置了属性[first] = 50，它显示了正确的页面，但当我滚动事件时，所发出的偏移量为10而不是60，这是为什么？
浏览 35提问于2019-06-18得票数 2
回答已采纳
我很难让虚拟滚动在使用scrollHeight='flex'的Flex表上工作。
我有一个固定高度的外部元素，如下所示：
<div style="height: 800px">
<h5>Virtual Scroll with Preloaded Data (1000 Rows)</h5>
<p-table
[columns]="cols"
[value]="cars"
[scrollable]="true"
[
浏览 0提问于2019-01-16得票数 3
我正在使用primeng表.. 我有这个onLazyLoad函数 this.apiService.getUsers(this.searchQuery,event.sortField,event.sortOrder===-1? "desc" : "asc",****** PAGE ******).subscribe(
res=>{
if(res){
this.users=res.data.concat(this.users );
}
} 然后 p-table [value]="users" (onLazy
浏览 14提问于2021-09-22得票数 0
我有一个下拉列表，其中包含在特定条件下从angular函数动态加载的100+元素。 此加载需要几秒钟。没有挂起的http调用，该时间由priming组件(dropdown)用于delete和create元素(选项)。 我会尝试使用primeng v7中的新功能virtualScroll。 我的项目有angular 4.x和primeng v6。我还没有找到primeng 7的基本要求。我试图升级到项目7，但项目仍然失败。 是否有从primeng 6迁移到primeng 7的文档？或者有没有可能在primeng 6中使用virtualscroll？
浏览 22提问于2019-07-03得票数 0
3回答
我有一个包含许多列和行的PrimeNG p表，其中一列使用输入作为其单元格编辑器。压缩版本如下：
<p-table [value]="rowDatas" selectionMode="single" [(selection)]="selectedRowData">
<ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
<tr [pSelectableRow]="rowData">
浏览 6提问于2020-05-04得票数 1
1回答
如何更改p-table的边框颜色？我能够更改表标题边框的颜色，但我不知道如何更改p表主体的颜色。
body .ui-table .ui-table-tbody > tr > td { padding: 0.571em 0.857em; border: #e3e3e3; }
我已经在theme.css中尝试过这一点，在resources/theme.css中使用了primeng，但是它仍然没有用。
浏览 4提问于2020-07-17得票数 0
在PrimeNg Turbotable中，我使用loadingIcon在加载数据时显示旋转器。我不能增加primeIconπ旋转器的大小.
HTML代码：
<p-table #resdt exportFilename="RecordChange" [value]="recordList"
[(selection)]="selectedRecord" [loadingIcon]="loadingIcon"
[loading]="loading" sortField="re
浏览 5提问于2020-08-27得票数 1
回答已采纳
1回答
当primeng p-table上的任何可编辑单元格值发生变化时，我都会尝试调用该方法。我试图使用onEditComplete事件，但它只有在我编辑单元格并按enter时才会触发。当我编辑单元格并移出鼠标时，它不会触发。有人能建议我应该在这里添加什么正确的事件吗？
<p-table [value]="sampleData" [scrollable]="true" scrollHeight="200px" [resizableColumns]="true"
(onEditComplete)="g
浏览 18提问于2019-10-22得票数 0
我已经升级了我的角PrimeNG应用程序从v9到11。下拉延迟加载已经停止工作，事件PrimeNG现在不被调用。下面是示例代码
<p-dropdown id="field_branch" name="branch" [options]="branchOptions" formControlName="branchId"
[virtualScroll]="true" [lazy]="true" [rows]="10" (onLazyLoad)="onBranchL
浏览 9提问于2021-03-10得票数 1
我在一个角7应用程序上使用了一个PrimeNG TurboTable组件，并且有一个按钮来向它添加新的行。问题是，当添加新行时，用户必须向下滚动到表的底部才能开始编辑。我怎么能滚动到它呢？
我是这样在模板中定义表的：
<p-table [value]="gridOptions" [scrollable]="true" scrollHeight="13em"
selectionMode="single" [(selection)]="selectedOption"
(onEditComplete)="
浏览 2提问于2019-01-08得票数 1
回答已采纳
我正在尝试实现scrollable="true“和PrimeNg p-table中的头文件。但是，如果我不使用可滚动的，粘性头就能正常工作。如果实现了这两种方法，滚动可用，但粘性标头不起作用。
我使用下面来自primeng的css作为粘性标题。
:host ::ng-deep .ui-table .ui-table-thead > tr > th {
position: -webkit-sticky;
position: sticky;
top: 69px;
box-shadow: 1px 3px 6px 0
浏览 13提问于2020-09-16得票数 2
回答已采纳
1回答
我已经创建了一个具有延迟加载和全局筛选功能的datatable。我在实现中使用了PrimeNG组件。但我发现，当启用延迟加载(即lazy="true“)时，全局筛选器无法工作。
HTML代码:
<input #gc type="text" pInputText size="30" placeholder="Global Filter" class="element-space">
<p-dataTable [value]="infoList" [rows]="5" [gl
浏览 3提问于2017-11-14得票数 3
设置第三方组件的推荐方法是什么？ 我在应用程序的许多不同组件中使用primeng p-table。我想为整个应用程序设置一次-默认情况下打开分页器，设置每页的默认行数等。 如果让p-table中的每一列在默认情况下都是可排序的，那就太棒了……
浏览 15提问于2020-01-31得票数 0
Stackblitz：
配置：
"@angular/cli": "~7.0.2", "primeng": "7.0.5",
我有一个用延迟加载实现的PrimeNG p表。需要添加多列排序。
上面的Stackblitz链接中的示例代码。
<p-table [columns]="cols" [value]="cars1" [lazy]="true" [lazyLoadOnInit]="false" (onLazyLoad)="loadList($event)
浏览 11提问于2019-12-27得票数 0
回答已采纳
2回答
我在p-table的页脚里有一个p-dropdown。这些都是PrimeNg组件。我注意到下拉列表有时会打开到顶部，在这种情况下，我喜欢这样，我想强制它始终打开到顶部。
在p-dropdown的文档中，我找不到任何有用的东西。我可能有一个CSS选项，我能帮上忙吗？敬请指教。
<p-dropdown [options]="myTypeOptions" [formControlName]="type" appendTo="body" [showClear]="true"></p-dropdown>
浏览 0提问于2019-03-29得票数 0
我使用来自Primeng的新的p-table模块和可编辑的单元格。编辑完成后(按下返回)，将触发p-table中的onEditComplete事件，我将调用goo($event)方法。遗憾的是，事件为空/未定义/空。报警器说：
onEditComplete ->
event.column: Column object of the cell
event.data: Row data
event.index: Row index
Callback to invoke when cell edit is completed.
我的桌子是可参观的，而且工作得很好。
<p-table
浏览 0提问于2018-03-09得票数 3
回答已采纳
我试图使用下拉菜单过滤primeNG表中的列，但我只想在按“应用”按钮时应用该筛选器。现在，过滤发生在onChange事件中。如果删除onChange事件，则筛选器无法工作。
这是没有onChange事件的代码：
<p-table #dt1 [value]="customers">
<ng-template pTemplate="header">
<tr>
<th>
<div>
Status
浏览 5提问于2021-03-01得票数 2
回答已采纳
2回答
PrimeNG动态列过滤
、、、、
我目前有以下PrimeNG TurboTable：
<p-table [value]="People" >
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Age</th>
<th>Height</th>
</tr>
</ng-template>
<ng-template pTemplate="
浏览 21提问于2018-02-22得票数 6
1回答
我使用primeng p-table，并使用复选框选择器来选择行，如下所示。
<p-table [value]="data" [paginator]="true" [loading]="loading" [(selection)]="selectedItems" #dt>
<ng-template pTemplate="header">
<tr>
<th style="width: 3rem">
<p-tabl
浏览 4提问于2020-09-30得票数 1
回答已采纳
当在PrimeNG上启用默认排序时，TurboTable排序图标在初始加载时不可见，列标题将在使用时设置样式，数据将正确排序。当我手动单击标题再次排序时，会出现排序图标。 ? html： <p-table [columns]="columns" [value]="users" sortField="name" sortOrder="1">
<ng-template pTemplate="header" let-columns>
<tr>
<
浏览 34提问于2019-05-24得票数 1
回答已采纳
1回答
目前，我正在使用PrimeNG 12表进行一个使用角12的项目，但在角度变化检测和表更新方面遇到了一些困难，特别是试图防止PrimeNG p-table在数据刷新时回滚到顶部。
对于某些背景，我有一个服务(让我们称之为LocationService)，它负责保存一个位置列表并每500毫秒更新一次。如下所示：
location.ts
interface Location {
id: string;
lat: number;
lng: number
}
location.service.ts
// RxJS Behaviour Subjects
_locationUpdat
浏览 3提问于2021-07-06得票数 2
回答已采纳
2回答
我有一个PrimeNG表，一切都像预期的那样工作。我已经实现了排序。
我得到的是表中每一列的排序选项，但我只想在特定的列中使用该选项。
有什么建议吗？
提前进行Thx
||威利..
<p-table [columns]="wikiCols" [value]="wikiItems" selectionMode="single" [(selection)]="selectedItem">
<ng-template pTemplate="header">
<tr>
浏览 0提问于2018-08-10得票数 3
回答已采纳
我在用PrimeNG的p-table。该表目前有两列的默认排序，但是第三列数据应该按照状态(High，中度，Low)进行排序。现在我需要在这个列上实现排序，但这必须是一个基于自定义逻辑的排序。
我知道p-table在表级别提供了这个特性，但在列级别上我不确定，如下所示：
<th pSortableColumn="status">Status<p-sortIcon field="status"></p-sortIcon></th>
我的HTML结构-
<p-table #orderTable [value]=&
浏览 7提问于2022-06-21得票数 0
我实现了一个使用PrimeNG、TurboTable和NgRx的自定义网格组件，并使用内置的TurboTable虚拟卷轴向其添加了虚拟滚动功能。它也是延迟加载，使用onLazyLoad处理程序。但是，当我滚动网格结果时，当onLazyLoad被调用时，我会出现这种奇怪的行为。
onLazyLoad called with event.first=0 and event.rows=40
onLazyLoad called with event.first=0 and event.rows=80
onLazyLoad called with event.first=0 and event.rows
浏览 0提问于2019-04-10得票数 6
回答已采纳
我已经更新了我的角应用程序到一个新的版本(anugular8.1.3和PrimeNg 8.0.2)。除了我的PrimeNg p-表中的展开行之外，所有事情都正常工作。
我试着效仿primeng 的例子，但这似乎没有帮助。我想要的是，在数据作为缺省值加载之后，行应该展开。
<p-table [value]="regelklassenJahrgaenge" dataKey="jahrgangName" [expandedRowKeys]="expandedJahrgaenge">
<ng-template pTemp
浏览 2提问于2019-07-29得票数 0
回答已采纳
4回答
我正在使用primeNg <p-table>。我想实现数据的排序。我所做的如下所示
sort.HTML
<p-table [columns]="cols" [value]="documents">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns" [pSortableColumn]="col.field"
浏览 0提问于2018-06-28得票数 7
我有一个角度应用程序，当它加载从一个拥有大约12K记录的mongodb地图集获得所有数据时，它每天都在增加，所以一个大的数据集。此数据从primeng加载到表中。我们希望在表中任何时候都有所有可用的数据，这样我们就可以在内存中查询、查看和查询整个数据集。我有两个主要问题：
由于数据集很大，现在加载大约需要10秒，而且随着我们得到更多的数据，它显然会增加。所以我想加快速度
这些数据正被从外部源倒入mondogb地图集中。一旦我在网站中加载数据，我希望能够侦听新的数据，并更新我的用户界面，而不需要重新加载页面，因为我上面的第一点)。我怎么能这么做？
我在网上研究了不同的主题，比如r
浏览 2提问于2019-06-20得票数 1
回答已采纳
我为PrimeNG p-table找到的所有示例都显示了以下筛选表的示例。
<input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Filter" />
当我使用它时，我会得到一个编译错误。
error TS2339: Property 'value' does not exist on type 'EventTarget'.
注意:我确实打
浏览 16提问于2021-01-02得票数 16
回答已采纳
1回答
我是Angular的新手，我正在使用primeng Datatable在我的应用程序中显示网格，现在我已经为网格集成了分页，当用户搜索或点击页码时，我需要向网格添加加载/微调符号。下面，serviceloading在方法开始时被设置为true，但是服务没有在特定的实例中被调用，这使得总是显示加载，实际上我只在得到响应时才隐藏加载。那么有没有什么方法可以在API调用开始时将loading设置为true，这样我就可以在得到响应后隐藏起来。
提前感谢
private TransactionSearch: Subject<void> = new Subject();
loadTerrito
浏览 13提问于2020-02-19得票数 0
回答已采纳
2回答
我正在尝试用primeng <p-datatable>实现一组大数据的延迟加载。我已经做了所有的文件记录在官方网站上，但我无法使它工作。
onLazyLoad回调在加载表时只运行一次。它不会像预期的那样在每个滚动体上触发。
<div style="max-height:300px; border:1px solid black;overflow-y:auto">
<p-dataTable #pocListref [value]="data" rowHover="true" [(selection)] =
浏览 8提问于2017-09-19得票数 2
回答已采纳
1回答
我使用带有延迟加载和启用加载的primeng表来属性它没有更新，甚至没有更新
<p-table #dt [loading]="loader" [columns]="cols" [value]="datasource.merchants" [rows]="perPage" [paginator]="true" [pageLinks]="5"
[lazy]="true" [totalRecords]="datasource.totalCount" (on
浏览 1提问于2018-02-15得票数 0
回答已采纳
PrimeNG，p- table 组件，当数据重新加载时，表重置为第一个分页器选项卡。
是否有任何方法来停止这种行为，并使分页器在重新加载数据时保持在相同的选定选项卡中(例如，2、4或5等)？
通过使用循环中的RestAPI ()调用setTimeout()，每10秒重新加载数据，直到它停留在该页面上。
<p-table #dt [columns]="cols" [value]="dataMarts" [paginator]="true" [rows]="15" [pageLinks]="5
浏览 1提问于2018-06-06得票数 4
回答已采纳
我使用PrimeNg表来显示数据，并添加了如下所示的空消息模板： <ng-template pTemplate="emptymessage">
<tr>
<td>
No records found
</td>
</tr>
</ng-template> 我使用的是延迟加载，因为数据是从服务器获取的。我添加了一个加载标志，该标志在http调用完成时更改。代码如下： this.myService
.myHttpCallFunction(params
浏览 6提问于2020-10-22得票数 0
我正在使用角为8的primeng 8.1
我用#dt引用我的p-表，然后调用dt.reset()和get候选人()来刷新
但是它显示了p-table的第一页，没有刷新我在官方文档中搜索的列表，但是我没有找到解决方案，所以刷新数据的唯一方法是重新加载整个导航页。
<p-table #dt
[paginator]="true"
[columns] = "cols"
[value]="listcandidats"
[totalRecords]="listcandidats.length"
[paginator]="
浏览 4提问于2019-12-08得票数 3
回答已采纳
我有X区。我想要“懒惰”加载图像在不同的自定义单元格为每个部分。有什么比每次检查cellArray.object (visibleCells)是否等于加载这些映像的Ccell更好的方法吗？
更新:这里的是一个工作代码(目前.)。我的代码基于禤浩焯Kosmaczewski的示例。
- (void)loadContentForVisibleCellsInSection{
NSArray *visiblePaths = [self.tableView indexPathsForVisibleRows];
for (NSIndexPath *indexPath in visibleP
浏览 3提问于2010-03-07得票数 3
回答已采纳
我使用PrimeNg表显示数据，并添加了空消息模板，如下所示：
<ng-template pTemplate="emptymessage">
<tr>
<td>
No records found
</td>
</tr>
</ng-template>
我使用延迟加载，因为数据是从服务器获取的。我添加了一个加载标志，当http调用完成时，该标志将被更改。守则如下：
this.myService
.myHttpCallFunction(params)
浏览 1提问于2019-06-26得票数 1
1回答
我想在我的p-datatable上使用PrimeNG的GlobalFilter，只在employeeid和name列上使用...我在这个表中还有另外5列，但我不想使用globalfilter，而且要求只有globalfilter，否则我可以做列过滤。我该怎么做呢？
我搜索了一下，它在p-table中是可能的，但我想用p-datatable来实现。
下面是我的代码：
<div class="md-input-wrapper">
<input #gb type="text" pInputText size="50" class=&
浏览 5提问于2019-06-03得票数 0
2回答
我有带有日期的JSON对象。此JSON的结构如下所示：
{
"dates": [
[
1660834227864
],
[
1660883117638
],
[
1660883397773
]
]
}
这些是我的日期数据，我想按上面的最新日期对其进行排序。我使用‘日期’管道格式化这些日期，这是很好的工作。当我将日期数据加载到我的应用程序中时，最近的日期是在下面而不是上面。
我使用PrimeNG表
浏览 6提问于2022-08-19得票数 0
回答已采纳
我想在Angular 2中实现PrimeNG DataTable LazyLoading，但在互联网上找不到实时的例子。
我已经提到了下面的PrimeNG站点，它显示了使用虚拟数据的延迟加载：
是否有人通过调用BE服务来实现？请帮帮忙。
浏览 4提问于2017-08-11得票数 2
我有一个PrimeNG表作为一个子组件，它有以下代码：
child-component.html
<p-table
[value]="data"
[autoLayout]="true"
[loading]="loading"
[(selection)]="selectedItems" #dt
>
child-component.ts
@Component({
selector: "manager-grid",
templateUrl: "./g
浏览 4提问于2020-09-27得票数 0
我已经研究过一些类似的问题，但这些问题对我的情况都没有帮助。我收到了一份讣告，上面有城市的名字，居民和州的名字。这是我的http服务请求：
cidadesUrl = 'http://localhost:8080/api/cidades';
constructor(private http: HttpClient) { }
listar(): Observable<Cidade[]>{
return this.http.get<Cidade[]>(this.cidadesUrl);
}
这里是呼叫服务的电话：
cidades!:
浏览 5提问于2022-02-23得票数 0
我正在尝试创建具有角度形式的PrimeNg可编辑表。
app.component.ts (这是最小可复制代码)
export class AppComponent implements OnInit {
epForm: FormGroup;
range: FormArray;
constructor(private fb: FormBuilder,){
}
ngOnInit() {
this.epForm = new FormGroup({});
this.epForm.addControl('range'
浏览 0提问于2019-03-07得票数 8
回答已采纳
我有一个使用PrimeNg组件的Angular应用程序。我对ConfirmDialogModule有个问题。
这是我的html：
<p-table [columns]="tableCols" [value]="currentEstablishment.Sales" [rows]="10" [paginator]="true">
<ng-template pTemplate="header" let-columns class="cervezapp-grid-header-
浏览 11提问于2020-06-05得票数 1
3回答
我试图使用PrimeNG来创建一个分页的表，但是我得到了这个基本表，几乎没有样式
我想要和这个一样的款式
我想我已经安装和进口了所有所需的软件包。另外，我将所需的styles路径添加到angular.json文件中。
这是我的package.json
{
"name": "shopping-cart",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng se
浏览 9提问于2021-12-22得票数 1
1回答
Current Stackblitz Here 几周前，我问并回答了一个question for using arrow keys for a PrimeNG table。 到目前为止，代码允许用户在"search“输入处于焦点时，在表行上上下导航，然后单击"enter”选择表行。但是，在使用滚动表格时，如此stackblitz所示，选定的表格行不会出现，因为它隐藏在滚动条的下方。如果我使用tab导航到表单元格，那么它也会滚动，但不会像本例中那样使用箭头键。 有没有可能根据selectedProduct改变滚动条的位置，这样表行就不会隐藏在下面？ HTML格式的表格设置： &
浏览 23提问于2021-11-05得票数 0
回答已采纳
我有一个virtualScroll，其中我指定了approxItemHeight：
<ion-list [virtualScroll]="myArray" [approxItemHeight]="'320px'">
<ion-item *virtualItem="let myItem"></ion-item>
</ion-list>
当离子创建列表时，approxItemHeight值似乎被忽略了。
以下是页面加载上的离子列表元素：
<ion-list class=&#
浏览 1提问于2017-07-17得票数 0
我有一个PrimeNG应用程序，在p-table的每一行的单元格内都有一个p按钮，它有一个pInitEditableRow属性，所以当您单击它时，表行就会变成可编辑的--就像它应该做的那样。
所以问题是我不希望它一直都是可编辑的。我有一个条件，将禁用设置为true，然后p按钮看起来是禁用的。
但是，当我单击禁用的p-按钮时，它仍然呈现表行可编辑.当它被禁用时，我不想让它做任何事。
这是我的p按钮。我会发布更多的代码，除非这是真正的全部。如果我将其保留为完全正确，则按钮看起来是禁用的，但仍然呈现表行可编辑。
<p-button pInitEditableRow icon="pi
浏览 4提问于2022-09-08得票数 -1
回答已采纳
仪表板组件是全局组件。用户模块是延迟加载的，其中包含登录组件。我想在延迟加载的登录组件中访问这个仪表板组件。我怎样才能做到这一点？我知道我们可以使用共享模块。但是，我不知道如何准确地执行它。请带我过去。
Dashboard.componenet.html
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<p-menu [model]="menuItems"></
浏览 0提问于2018-02-10得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
