0

我正在使用可以有很多行（有时多达 500 行）的剑道网格，每个网格都有一个包含更多数据的子网格。可以在此处找到类似的示例 ( http ://demos.kendoui.c​​om/web/grid/hierarchy.html )。我添加了扩展所有子网格的功能。本质上只是一个在每个下拉箭头上触发单击事件（通过 jQuery）以显示子网格的按钮。

我的问题是 jQuery 本质上是单独单击每个下拉箭头。这是一个问题，因为当每个箭头被单击时，它都会触发一个 Ajax 调用。在这种情况下，我有 500 行，结果是 500 个单独的 Ajax 调用，这会产生大量的加载/延迟，有时会导致我的浏览器无响应。

有没有更好的方法来扩展所有行/加载数据，以免后端/前端因大量 Ajax 调用而陷入困境？可能是一种更有效的方法来打开所有下拉列表并对所有子网格数据进行一次 Ajax 调用？我正在使用 ASP.NET Kendo 库来实例化网格。

谢谢！

4

2 回答 2

0

您需要使用子网格的嵌套（分层）模型为网格实现本地数据绑定（混合实现的种类），这会导致初始加载/滞后并且没有进一步的开销。假设您使用的是 C# 包装器：

public class TestViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public IList<AssetViewModel> Assets { get; set; }
}

public class AssetViewModel
{
    public long Id { get; set; }
    public string AssetName { get; set; }        
}

视图将是：

@model IEnumerable<IRAS.Animation.Pipeline.ViewModel.ProjectManagement.TestViewModel>

@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.Id);
        columns.Bound(p => p.Name);       
    })
    .Pageable()
    .Sortable()
    .Scrollable(scr=>scr.Height(430)) 
    .Filterable()
    .DetailTemplate(@<text>
                @(Html.Kendo().Grid(item.Assets)
            .Name("grid_"+item.Id)
            .Columns(columns =>
            {
                columns.Bound(o => o.Id);
                columns.Bound(o => o.AssetName);                
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(5)
                .ServerOperation(false)
            )
            .Pageable()
            .Sortable()            
    )
                </text>)
    .DataSource(dataSource => dataSource        
        .Server()
        .PageSize(20)               
     )
)

当然，我们需要提供从控制器动作到视图的分层模型集合。我们同时使用 .Ajax() 和 .Server() ，因此主网格将服务器绑定事物（排序、分组、过滤）。现在我们可以通过单击按钮来展开所有子网格，而无需单独调用服务器。

于 2013-11-08T07:11:13.650 回答
0

如果您根据示例构建网格，那么您有一个 detailInit 函数来加载详细信息。您说您的按钮为每一行调用 expandRow 方法。为了避免多次 AJAX 调用，我会尝试以下操作：

  • 当我单击按钮打开所有详细信息时，将所有详细信息加载到 javascript 对象中
  • 编写第二个 detailInit 函数以使用 javascript 对象而不是 AJAX 调用来加载详细信息数据
  • 然后将原始 detailInit 函数与第二个 detailInit 函数交换
  • 然后为每一行调用expandRow方法
  • 然后将第二个 detailInit 函数与原始 detailInit 函数交换以恢复正常行为

更新：

我错过了这个部分：

我正在使用 ASP.NET Kendo 库来实例化网格。

所以我的解决方案可能不适用于 Kendo UI ASP.NET MVC 服务器包装器。

于 2013-11-08T07:14:19.787 回答