jquery - 带有大量复选框的弹出窗口的渲染速度非常慢

Question

我有部分 View ，它应该是 jquery 弹出窗口的内容。它包含很多复选框，例如 50 个类(class) * 200 名学生 = 10 000 个复选框。当用户单击主视图中的一项培训时，应打开弹出窗口，其中包含按类(class)选择学生的选项(10 000 个复选框)。首先，我尝试训练单击以使用ajax并获取所有组合(选中和未选中)并将其附加到弹出窗口的父div。但问题是像这样附加:

$("#choose-students-by-class-dialog").append(response);

花了大约13秒，慢得令人难以忍受。由于类(class)和学生的组合保持不变，我决定在初始页面加载时渲染该弹出窗口(部分 View )，并在训练时单击以检查已检查的该训练组合并显示弹出窗口。所以我渲染了这样的部分 View :

@{ Html.RenderAction( "GetStudentsForTraining", "Training", new { trainingId = -1 } ); }

但是初始页面的渲染时间太长，页面变得无响应。

那么有人可以建议我该怎么做吗？

这是我提到的部分 View 的简化版本:

@model Trainings.Training

<div id="choose-students-by-class-dialog" title="select students" style="display:none">
    @using ( Html.BeginForm( "SetStudentsForClass", FormMethod.Post, new { id = "chooseStudentsByClassesForm", Area = "TimeTracking" } ) )
    {
        @Html.HiddenFor( m => m.TrainingId )
        <div class='cpCheckBoxes'>
            @for ( int i = 0; i < Model.ClassWithAssignedStudents.Count; i++ )
            {
                @Html.HiddenFor( m => Model.ClassWithAssignedStudents[ i ].Id )
                string className = Model.ClassWithAssignedStudents[ i ].Code + " (" + Model.ClassWithAssignedStudents[ i ].Name + ")";
                <div class="cpEngagement">
                    <div class='cpExpandCollapseIcons'></div>
                    @if ( Model.ClassWithAssignedStudents[ i ].AssignedStudents.All( u => u.IsAssigned ) )
                    {
                        @Html.CheckBox( Model.ClassWithAssignedStudents[ i ].Code, new { @class = "classCheckboxes", @checked = "checked" } )
                    }
                    else
                    {
                        @Html.CheckBox( Model.ClassWithAssignedStudents[ i ].Code, new { @class = "classCheckboxes" } )
                    }
                    <div class="cpClassName">@className</div>
                    <div class="cpInnerCheckBoxes cpInnerCheckBoxesHidden">
                        @for ( int j = 0; j < Model.ClassWithAssignedStudents[ i ].AssignedStudents.Count; j++ )
                        {
                            <div class="cpStudent">
                                @Html.HiddenFor( m => m.ClassWithAssignedStudents[ i ].AssignedStudents[ j ].UserId )
                                @Html.CheckBoxFor( m => m.ClassWithAssignedStudents[ i ].AssignedStudents[ j ].IsAssigned )
                                <span class="cpStudentFullname">
                                    @Model.ClassWithAssignedStudents[ i ].AssignedStudents[ j ].UserFullName
                                </span>
                            </div>
                        }
                    </div>
                </div>
            }
        </div>
    }
</div>

Answer 1

最好的解决方案可能是不显示所有复选框。
您可以使用您认为最适合的解决方案:分页、无限滚动等。

这是一个类似的问题:How to improve performance of ngRepeat over a huge dataset (angular.js)?
提供的解决方案使用 AngularJS，但可以使用 jQuery 或 vanilla JS 应用相同的原理。