组件/网格/分组

新Blazor的Telerik UI?下载30天免费试用

按需加载组数据

网格组件允许您为每个个体加载数据集团按需，而不是让它一直存在。

在本文中:

基础知识

若要为组启用按需加载，请设置LoadGroupsOnDemand = " true "电网。在此模式下，当没有分组时，Grid将正常工作，您可以将此模式与行的虚拟滚动．

一旦应用了分组(由用户手动或通过Grid)状态)，组将默认显示为折叠。当用户展开一个组时，将从数据源请求其中的所有行。如果你提供所有的数据到网格中，组件将为您执行操作。服务器操作请参见下文。

为了分页，每个组页眉、每个组页脚和Grid页脚都将算作行。控件中，在展开组之前，其子项都不会被计算和显示总计计数用于分页。

服务器操作

方法按需加载数据时OnRead事件，根据需要的数据，可以有三种不同类型的请求:

  • 如果没有分组，则请求与往常一样—Grid没有添加额外的参数或设置。

  • 如果存在分组，并且网格需要组列表，则GroupPagingits参数DataSourceRequest将被设置为真正的．

    • 如果当前展开的组行具有子组，则使用GroupPaging参数设置为真正的，提示响应必须包括子组中的项目总数，并再次返回组的集合，而不是模型的集合。

    • 如果Grid从分组集开始，它将对所有组的列表发出一个请求，并将它们保存在内存中以便分页。

  • 如果当前展开的组行没有子组，则过滤器参数。DataSourceRequest将包含请求项的组值(以及任何子组的值)。的页大小的值设置为0这样Grid就可以获得该组的所有项目。的OnRead事件将在每次展开一个组以获取该组的所有项时触发。

当分组处于活动状态时，不会触发分页和虚拟滚动操作OnRead，因为Grid已经拥有当前展开的组的所有组头和所有项。

例子

本节举例如下:

定期分页和按需分组加载

这个示例展示了按需设置启用组加载的基础知识LoadGroupsOnDemand = " true "．根据Team和/或Vacation列对网格进行分组，以查看效果。

将“Team”和/或“On Vacation”列的列头拖到顶部的组面板上           Employees in this group: @context.Count     Lowest salary in this group: @context.Min   Total salary expenses @context.Sum     Employees with "OnLeave" @context.Value : @context.Count     @code { public List GridData { get; set; } protected override void OnInitialized() { GridData = new List(); var rand = new Random(); for (int i = 0; i < 25; i++) { GridData.Add(new Employee() { EmployeeId = i, Name = "Employee " + i.ToString(), Team = "Team " + i % 3, IsOnLeave = i % 2 == 0, Salary = rand.Next(1000, 5000) }); } } public class Employee { public int EmployeeId { get; set; } public string Name { get; set; } public string Team { get; set; } public bool IsOnLeave { get; set; } public decimal Salary { get; set; } } }

虚拟滚动，按需分组加载和服务器端数据操作

这个示例展示了如何结合虚拟行滚动特性和通过远程服务(本例中由静态类模拟，以便轻松运行)按需加载组数据，以及如何将网格的初始状态设置为默认分组。

@using Telerik。数据Source @using Telerik.DataSource.Extensions Scroll through the groups or expand them to load their data on demand         @code { List GridData { get; set; } protected async Task ReadItems(GridReadEventArgs args) { // sample data retrieval, see comments in the service mimic class below DataEnvelope result = await MyService.GetData(args.Request); if (args.Request.Groups.Count > 0) { args.Data = result.GroupedData.Cast().ToList(); } else { args.Data = result.CurrentPageData.Cast().ToList(); } args.Total = result.TotalItemCount; } void OnStateInitHandler(GridStateEventArgs args) { // set initial grouping GridState desiredState = new GridState() { GroupDescriptors = new List() { new GroupDescriptor() { Member = "Team", MemberType = typeof(string) }, new GroupDescriptor() { Member = "IsOnLeave", MemberType = typeof(bool) } } }; args.GridState = desiredState; } public class Employee { public int EmployeeId { get; set; } public string Name { get; set; } public string Team { get; set; } public bool IsOnLeave { get; set; } public decimal Salary { get; set; } } public class DataEnvelope { public List GroupedData { get; set; } public List CurrentPageData { get; set; } public int TotalItemCount { get; set; } } public static class MyService { private static List SourceData { get; set; } public static async Task> GetData(DataSourceRequest request) { if (SourceData == null) { SourceData = new List(); var rand = new Random(); for (int i = 1; i <= 2500; i++) { SourceData.Add(new Employee() { EmployeeId = i, Name = "Employee " + i.ToString(), Team = "Team " + i % 100, IsOnLeave = i % 3 == 0, Salary = rand.Next(1000, 5000) }); } } await Task.Delay(500);// deliberate delay to showcase async operations, remove in a real app // retrieve data as needed, you can find more examples and runnable projects here // https://github.com/telerik/blazor-ui/tree/master/grid/datasourcerequest-on-server var datasourceResult = SourceData.ToDataSourceResult(request); DataEnvelope dataToReturn; if (request.Groups.Count > 0) { dataToReturn = new DataEnvelope { GroupedData = datasourceResult.Data.Cast().ToList(), TotalItemCount = datasourceResult.Total }; } else { dataToReturn = new DataEnvelope { CurrentPageData = datasourceResult.Data.Cast().ToList(), TotalItemCount = datasourceResult.Total }; } return await Task.FromResult(dataToReturn); } } }
         
限制

         
    
          
  • 组的展开状态仅在分页期间保留，但在应用排序或筛选时不保留。
    • 
          
  • 由于组页眉和页脚被视为网格中的行，因此当您对网格进行分页时，组页眉可能仍然位于数据的前一页。
    • 
          
  • 如果按需分组负载与虚拟滚动：
    
           
      
            
    • 虚拟滚动的所有要求和限制都适用。
      • 
            
    • 聚合不支持。
      • 
           
    • 
          
  • 仅导出当前Grid页面时(AllPages = " false ")，导出的文件将不包含折叠组的子数据。
    • 
         

         
另请参阅

         
        
       
      
      
     
     

      

       

        在本文中

       
      

      
      

       

        相关文章

       
      

      
      

       找不到你需要的帮助?
       
       
        
        
        
         
         
          
         
        改进这篇文章
      

     

    
   
   

   
  
  
  
  
  
  
 
Baidu