2016-03-25 14 views
2

Kısmen jQuery açılan penceresinin içeriği olmalıdır. Çok sayıda onay kutusu içerir, örneğin 50 sınıf * 200 öğrenci = 10 000 onay kutusu. Kullanıcı ana görünümde bir eğitime tıkladığında pop-up, öğrencileri sınıf (10.000 onay kutusu) ile seçmek için seçeneklerle açılmalıdır. İlk önce antrenmanı denedim ve ajax kullanıp tüm kombinasyonları (kontrol edilen ve işaretlenmemiş) al ve pop-up pencerenin sonuna ekle. Ancak sorun şu şekilde eklenmiştir:Çok sayıda onay kutusuyla açılan pencerelerin oluşturulması çok yavaş

yaklaşık 13 saniye sürdü, ki bu dayanılmaz bir yavaş. Sınıflar ve öğrenciler kombinasyonları aynı kaldığı için, ilk sayfanın yüklenmesinde ve eğitimde bu pop-up'ı (kısmi görünüm) oluşturmaya karar verdim ve yalnızca o eğitim için kontrol edilen kombinasyonları kontrol etmek ve pop-up penceresini göstermek için tıklayın.

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

Ama sonra başlangıçtaki sayfanın render çok uzundu ve sayfa tepkisiz hale: Ben böyle kısmi görünümü render.

Bu yüzden birileri bana ne yapmamı önerebilir?

@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> 

cevap

0

iyi çözüm muhtemelen tüm onay kutularını görüntülemek için değil olacaktır: Burada

bahsettiğim kısmi bakış sürümünü basitleştirilmiştir. sayfa numaralarını sonsuz kaydırmayı vb

İşte benzer bir soru:: How to improve performance of ngRepeat over a huge dataset (angular.js)?
sağlanan çözüm angularjs kullanır ama aynı prensip jQuery veya vanilya JS kullanılarak uygulanabilir Sandığından hangisi çözüm kullanabilirsiniz
iyi uyuyor.