JQGrid 모두 매우 느림

Question

저는 JQGrid가 있고 그리드에 축소/모두 확장 버튼을 구현했습니다. 그것은 작동하지만 엄청나게 느립니다. 여기에 사용한 코드가 있습니다. 단 120 행만 5-6 초 걸립니다. 이 성능을 향상시킬 수있는 방법이 있습니까? 미리 감사드립니다!

 function CollapseAll() { 
      $(".ui-icon-circlesmall-minus").trigger("click"); 
      $("#grid_toppager_left").find('.ui-icon-minus').removeClass('ui-icon-minus').addClass("ui-icon-plus"); 
     } 

     function ExpandAll() { 
      $(".ui-icon-circlesmall-plus").trigger("click"); 
      $("#grid_toppager_left").find('.ui-icon-plus').removeClass('ui-icon-plus').addClass("ui-icon-minus"); 
     } 

     var groups = []; 

     $("#grid").jqGrid({ 
        url: '@Url.Action("GetLoanReport", "Report")', 
        datatype: "json", 
        emptyrecords: "0 records found", 
        height: "auto", 
        mtype: 'POST', 
        maxHeight: maxHeight, 
        postData: { startDate: $("#startDate").val(), endDate: $("#endDate").val(), selectedStatuses: selectedStatuses, selectedProductGroups: selectedProductGroups, assignedBranchList: assignedBranchList, assignedToList: assignedToList, createdByList: createdByList, approvedByList: approvedByList, uploadedByList: uploadedByList }, 
        colNames: ['Branch', 'Status', 'Employee', 'Application ID', 'Customer Name', 'CustNo', 'Product Type', 'Description', 'Security Code', 'Final Rate', 'New Money', 'Total'], 
        colModel: [ 
         { name: 'Branch', index: 'Branch', cellattr: function() { return ' title="my custom fixed tooltip for the column"'; } }, 
         { name: 'Status', index: 'Status' }, 
         { name: 'EmplName', index: 'EmplName' }, 
         { name: 'ApplicationID', index: 'ApplicationID', sorttype: 'number', width: 125, sortable: true, formatter: createLink }, 
         { name: 'CustName', index: 'CustName', formatter: custnameFormatter, width: 200, sortable: true }, 
         { name: 'CustNo', index: 'CustNo', hidden: true, sortable: true }, 
         { name: 'ProductType', index: 'ProductType', width: 100, sortable: true, sorttype: "text" }, 
         { name: 'ProdDesc', index: 'ProdDesc', width: 250, sortable: true }, 
         { name: 'SecurityCode', index: 'SecurityCode', width: 125, sortable: true }, 
         { name: 'FinalRate', index: 'FinalRate', width: 75, align: "right", formatter: 'currency', formatoptions: { suffix: '%' }, sorttype: 'currency', sortable: true }, 
         { name: 'NewMoney', index: 'NewMoney', formatter: 'currency', align: "right", sorttype: 'currency', formatoptions: { thousandsSeparator: ",", decimalPlaces: 0, prefix: "$" }, width: 125, sortable: true }, 
         { name: 'TotalNewMoney', index: 'TotalNewMoney', formatter: 'currency', align: "right", sorttype: 'currency', formatoptions: { thousandsSeparator: ",", decimalPlaces: 0, prefix: "$" }, width: 125, sortable: true } 
        ], 
        jsonReader: { 
         repeatitems: false, 
         root: 'rowdata', 
         page: 'currpage', 
         total: 'totalpages', 
         records: 'totalrecords' 
        }, 
        loadComplete: function() { 
         WaitIndicatorClose(); 

         var reportSum = $("#grid").jqGrid('getCol', 'TotalNewMoney', false, 'sum'); 

         $("#gridPager_right").html("<div id='sumTotal'>Number of Applications: " + $("#grid").getGridParam("records") + ", Total: $" + formatMoney(reportSum, false, null, null, null, true, false) + '</div>'); 
         $("#gridPager_right").show(); 

         if (firstLoad == true) { 
          $(".ui-icon-circlesmall-plus, .ui-icon-circlesmall-minus").each(function() { 
           groups.push({ hid: $(this).closest("tr").attr("id"), collapsed: true }); 
          }); 
         } else { 
          $("#grid tr").each(function() { 
           for (var i = 0; i < groups.length; i++) { 
            if ($(this).attr("id") === groups[i].hid) { 
             if (groups[i].collapsed == false) { 
              $("#grid").jqGrid('groupingToggle', groups[i].hid); 
             } 
            } 
           } 
          }); 
         } 

         firstLoad = false; 

         $(".gridghead_0").attr("title", "Created by Branch"); 

         $(".appLink").on("click", function (e) { 
          var appID = e.currentTarget.innerHTML; 

          ConfirmBox("This will redirect you to the Application page. Are you sure?", 
            function() { 
             $.ajaxSetup({ cache: false }); 
             $.ajax({ 
              cache: false, 
              type: "Get", 
              url: "@Url.Action("VerifyAndSetApplicationID", "Application")", 
              data: { "applicationID": appID }, 
              success: function (data) { 
               if (data.Error) { 
                MessageBox(data.Error); 
               } else { 
                if (data.Success) { 
                 InitializeWriteAccess(appID); 
                } else { 
                 MessageBox(data.NotFound); 
                } 
               } 
              }, 
              error: function (xhr, status, error) { 
              }, 
              complete: function() { 
              } 
             }); 
            }, 
            function() { 
            }); 

         }); 
        }, 
        loadError: function() { 
         WaitIndicatorClose(); 
        }, 
        loadui: 'disable', 
        grouping: true, 
        onClickGroup: function (hid, collapsed) { 
         if ($(".ui-icon-circlesmall-plus").length == 0) { 
          $("#grid_toppager_left").find('.ui-icon-plus').removeClass('ui-icon-plus').addClass("ui-icon-minus"); 
         } else { 
          $("#grid_toppager_left").find('.ui-icon-minus').removeClass('ui-icon-minus').addClass("ui-icon-plus"); 
         } 

         for (var i = 0; i < groups.length; i++) { 
          if (groups[i].hid == hid) { 
           groups[i].collapsed = collapsed; 
          } 
         } 

         if (collapsed == true) { 
          $(".ui-icon-circlesmall-minus:hidden").each(function() { 
           for (var i = 0; i < groups.length; i++) { 
            if (groups[i].hid == $(this).closest("tr").attr("id")) { 
             groups[i].collapsed = true; 
            } 
           } 
          }); 
         } 

         $('#grid').trigger('reloadGrid'); 
        }, 
        groupingView: { 
         groupField: ['Branch', 'Status', 'EmplName'], 
         groupText: ['<b>{0}</b> Count: ({1})', '<b>{0}</b> Count: ({1})', '<b>Created by {0}</b> Count: ({1})'], 
         groupSummary: true, 
         groupColumnShow: false, 
         groupSummaryPos: "header", 
         groupCollapse: true 
        }, 
        loadonce: true, 
        rowNum: 10000, 
        showrownumbers: true, 
        toppager: true, 
        shrinkToFit: true, 
        pgbuttons: false, 
        pginput: false, 
        pager: gridPager 
       }); 
       $("#grid").jqGrid('navGrid', '#gridPager', { add: false, edit: false, del: false, find: false, search: false, refresh: false }); 
       $("#grid").jqGrid('navGrid', '#grid_toppager', { add: false, edit: false, del: false, find: false, search: false, refresh: false, width: 1093 }); 
       $("#grid").jqGrid('navButtonAdd', '#grid_toppager_left', { 
        caption: "Expand/Collapse All", 
        buttonicon: "ui-icon-plus", 
        onClickButton: function() { 
         if ($(".ui-icon-circlesmall-plus").length == 0) { 
          CollapseAll(); 
         } else { 
          ExpandAll(); 
         } 

         $('#grid').trigger('reloadGrid'); 
        } 
       }); 
       $("#grid").jqGrid('navButtonAdd', '#gridPager', { 
        caption: "Export to Excel", 
        onClickButton: function() { 
         fnExcelReport(); 
        } 
       }); 
      }); 

Answer 1

내가 게시하지 않은 코드에 문제가 있다고 가정합니다.

120 개의 행 더미 데이터와 호출기의 "Expand/Collapse All"버튼을 사용하여 the demo을 만들었습니다. 현재 (4.13.4) 버전 free jqGrid을 사용합니다. 이전의 (4.13.3) 버전의 무료 jqGrid와 동일한 데모의 성능은 테스트에서와 동일합니다. 당신은 그것을 시험해보고 성과가 좋다는 것을 볼 수 있습니다.

"모두 확장/축소"버튼의 약간 수정 된 코드를 사용했지만 확장/축소의 성능에는 차이가 없어야합니다. 업데이트]

.jqGrid("navButtonAdd", { 
    caption: "Expand/Collapse All", 
    id: "expand_collapse_all", 
    buttonicon: "ui-icon-plus", 
    onClickButton: function() { 
     var gridId = this.id, icons = this.p.treeIcons, 
      $expandCollapseAll = $("#expand_collapse_all"); 
     if ($expandCollapseAll.find('.ui-icon-minus').length > 0) { 
      $expandCollapseAll.find('.ui-icon-minus') 
       .removeClass('ui-icon-minus') 
       .addClass("ui-icon-plus"); 
      $(".tree-minus").trigger("click"); 
     } else { 
      $expandCollapseAll.find('.ui-icon-plus') 
       .removeClass('ui-icon-plus') 
       .addClass("ui-icon-minus"); 
      $(".tree-plus").trigger("click"); 
     } 
    } 
}); 

:은 당신이 마지막으로 게시 onClickGroup 및 loadComplete의 코드가 성능 문제의 출처는 사실을 알게 될 것입니다. 귀하의 경우 120 행 대신 1000 행이있는 the demo을 시도하십시오. 1000 행의 확장은 느리지 만 IE11 컴퓨터에서는 약 0.5 초, Chrome에서는 약 190 초입니다. 그것은 당신이보고 한 5-6 초가 아닙니다.

The next demo 모든 행을 확장/축소하기 전에 임시로 표를 숨긴 ​​다음 다시 표시합니다. 추가로 성능을 향상시킵니다. 마지막 데모는 Chrome에서 160 밀리 초 및 IE11에서 350 밀리 초 내 컴퓨터에서 모두 확장됩니다.