Question

我正在使用一个Kendo Grid，它可以有很多行（有时最多500行），每个行都有一个包含更多数据的子网格。可以在此处找到类似的示例（http://demos.kendoui.com/web/grid/hierarchy.html）。我已经添加了扩展所有子网格的功能。基本上只是一个按钮，在每个下拉箭头上触发点击事件（通过jQuery）以显示子网格。

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

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

谢谢！

Answer 1

您需要为网格实现本地数据绑定（混合实现的种类），其中嵌套（层次）模型用于子网格，这会导致初始加载/延迟并且不会产生进一步的开销。假设您使用的是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（），因此主网格将服务器绑定事物（排序，分组，过滤）。现在，我们可以通过按钮单击来扩展所有子网格，而无需单击服务器。

Answer 2

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

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

更新：

我错过了这部分：

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

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

太多的Ajax调用扩展了带有子网格的Kendo Grid中的所有功能

2 个答案: