彩票走势图

【实用教程】Blazor 文件管理器中引入分页功能

翻译|使用教程|编辑:吉伟伟|2024-11-06 11:59:12.833|阅读 6 次

概述:分页是一项重要功能,可帮助我们有效地加载大量数据。通过本文我们将了解如何启用、自定义和利用分页选项来改善处理大量数据集时的用户体验。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

分页是一项重要功能,可帮助我们有效地加载大量数据。我们的 Syncfusion Blazor 文件管理器允许在分段页面中显示文件和文件夹,从而更轻松地浏览大型目录。在文件管理器组件中处理大量数据时,此功能非常方便。此功能可用于有效地加载大量数据。我们的 Syncfusion Blazor 文件管理器允许在分段页面中显示文件和文件夹,从而更轻松地浏览大型目录。在文件管理器组件中处理大量数据时,此功能非常方便。此功能从Essential Studio 2024 v3本开始提供。  

Essential Studio企业版可以帮助开发者创建丰富的应用程序,并轻松地集成商业智能分析和报告解决方案。Essential Studio企业版是世界级的软件组件,它使得开发者能在最苛刻的环境下开发出高质量的软件。

Essential Studio Enterprise 2024 v3最新版下载

让我们从在文件管理器中启用分页和可用的可自定义选项的步骤开始。

在 Blazor 文件管理器中启用分页

要启用分页,请按照以下步骤操作:

  • 步骤 1:创建 Blazor 应用程序

首先创建一个 Blazor 应用程序并渲染文件管理器组件。有关更详细的步骤,请参阅入门文档。

  • 第 2 步:启用分页

将AllowPaging属性设置为 true 以激活分页,如下所示。

@using Syncfusion.Blazor.FileManager; 
@using Syncfusion.Blazor.Navigations; 
  
<SfFileManager  TValue="FileManagerDirectoryContent" AllowPaging="true"> 
 <FileManagerAjaxSettings Url="//ej2-aspcore-service.azurewebsites.net/api/Virtualization/FileOperations" 
                          UploadUrl="//ej2-aspcore-service.azurewebsites.net/api/Virtualization/Upload" 
                          DownloadUrl="//ej2-aspcore-service.azurewebsites.net/api/Virtualization/Download" 
                          GetImageUrl="//ej2-aspcore-service.azurewebsites.net/api/Virtualization/GetImage"> 
 </FileManagerAjaxSettings> 
</SfFileManager> 
  • 步骤 3:分页操作

当AllowPaging属性设置为 true 时,分页器将呈现在文件管理器的底部,允许您通过页面浏览数据。请参阅下图。

具有分页功能的 Blazor 文件管理器

自定义分页

Blazor 文件管理器允许您根据应用程序的需求自定义分页选项。以下是一些关键选项:

  • NumericItemsCount:控制显示多少页码。
  • CurrentPage:定义当前显示的页面。
  • PageSize:设置每页显示多少条记录。
  • PageSizes:调整页面大小下拉菜单中可用的选项。提到的PageSize必须是PageSizes属性中的值之一,才能在 Pager 下拉菜单中首先选择它。  
@using Syncfusion.Blazor.FileManager 
<SfFileManager TValue="FileManagerDirectoryContent" AllowPaging="true" Path="/Text Documents/"> 
 <FileManagerAjaxSettings Url="//ej2-aspcore-service.azurewebsites.net/api/Virtualization/FileOperations" 
                          UploadUrl="//ej2-aspcore-service.azurewebsites.net/api/Virtualization/Upload" 
                          DownloadUrl="//ej2-aspcore-service.azurewebsites.net/api/Virtualization/Download" 
                          GetImageUrl="//ej2-aspcore-service.azurewebsites.net/api/Virtualization/GetImage"> 
  
 </FileManagerAjaxSettings> 
 <FileManager PageSettings PageSize="5" CurrentPage="2" NumericItemsCount="5" PageSizes="@(new List<int>(){5,10,25,50})"> 
 </FileManagerPageSettings> 
</SfFileManager>

请参阅下图。

自定义分页

传呼机模板

FileManagerPageSettings中的 Template 属性允许您将自定义 UI 元素(例如按钮或任何 HTML 元素)插入到文件管理器页面设置中。这为分页用户界面提供了更大的灵活性和自定义性。有关模板自定义的更多详细信息,请参阅文档。请参阅下图。

Blazor 文件管理器中的 Pager 模板

如何导航到特定页面

通过调用GoToPageAsync方法,您可以将要导航的页码作为参数传递给此方法,从而导航到特定页面。

分页事件

文件管理器提供了两个事件来检测页面变化:

  • PageChanging :此事件在当前页面更改之前触发,允许您在导航之前处理操作。在需要的情况下,还可以使用PageChangingEventArgs取消页面导航。
  • PageChanged:页面切换后触发此事件,允许您在页面改变后执行加载新数据等操作。

请参阅以下代码示例。

@using Syncfusion.Blazor.FileManager; 
@using Syncfusion.Blazor.Navigations; 
<SfFileManager TValue="FileManagerDirectoryContent" AllowPaging="true"> 
 <FileManagerAjaxSettings Url="//ej2-aspcore-service.azurewebsites.net/api/Virtualization/FileOperations" 
                          UploadUrl="//ej2-aspcore-service.azurewebsites.net/api/Virtualization/Upload" 
                          DownloadUrl="//ej2-aspcore-service.azurewebsites.net/api/Virtualization/Download" 
                          GetImageUrl="//ej2-aspcore-service.azurewebsites.net/api/Virtualization/GetImage"> 
 </FileManagerAjaxSettings> 
 <FileManagerEvents TValue="FileManagerDirectoryContent" PageChanging="OnChanging" PageChanged="OnChanged"> </FileManagerEvents> 
</SfFileManager> 
@code { 
    public void OnChanging(PageChangingEventArgs args) 
    { 
        //Perform the required action before the page is changed. 
    } 
    public void OnChanged(PageChangedEventArgs args) 
    { 
        // Perform the required action before the page is changed. 
    } 
} 

请参阅下图:

Blazor 文件管理器中的分页事件

响应式布局

Blazor 文件管理器分页器还可以智能地运行,并根据分页器尺寸响应性地更改其 UI。其优化的设计可在不同的设备上提供最佳的 UI 交互。

当浏览器窗口调整大小时,Pager 中的元素将自动调整。优点在于,无需特定属性支持即可在文件管理器中启用此功能。

请参阅下图。

Blazor 文件管理器中的响应式布局

年终活动火热开启中

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP