2014-11-11 2 views
0

서버 측 작업을 위해 Entity Framework 6과 함께 ASP.Net MVC4를 사용하고 있으며 많은 용도로 jqgrid를 광범위하게 사용하고 있습니다. 현재 서버 쪽 페이징 및 정렬을 사용하고 있습니다.jqgrid의 검색 제안 성능이 좋지 않음

이제는 this demo을 나타내는 검색 제안을 구현했습니다. 처음에는 약 70,000 건의 제안 사항을 제시해야하지만 검색 상자에 문자를 입력하면 브라우저가 멈 춥니 다. 때로는 제안 사항을 표시하지만 다른 문자를 입력하지 못하게하는 경우가 있습니다. 나는 그것이 많은 제안 때문에 일어나고 있다고 생각한다. 나는 또한 here을 보았지만 길을 찾지 못했습니다. (올렉, 내가 당신을 찾고 있어요!)

검색 제안의 성능을 향상 시키려면 저를 도울 것입니다. 다음과 같이 내있는 jqGrid은 다음과 같습니다

$("#DetailGrid").jqGrid({ 
    url: dataTobind,   
    datatype: dataType,  
    rownumbers: false, 
    height: 400, 
    rowNum: 25,   
    mtype: 'POST', 
    colNames: ['ContactOrderNo', 'Contract Order Number', 'Serial Number', 'Model Number', 'Capacity', 'Contract Details'], 
    colModel: [ 
        { name: 'Capacity', width: 150, editable: false, hidden: true, sortable: false, editrules: { required: true } }, 
        { 
         name: 'ContactOrderNo', width: 300, editable: false, sortable: false, hidden: false,searchoptions: { 
          dataInit: function (elem) { 
           // it demonstrates custom item rendering 
           $(elem).autocomplete({ source: 'GetAutocompleteData' }); 
                 } 
         },        

          formatter: function (cellvalue, options, rowObject) { 

          return '<a href="/OrderList/AddOrder/?ModelNo=' + cellvalue + '" >' + cellvalue + '</a>'; 
         } 
        }, 

         { name: 'SerialNumber', width: 150, sortable: false, editable: false, editrules: { required: true } }, 
         { name: 'ModelNo', width: 150, sortable: false, search:true, editable: false, editrules: { required: true } }, 
         { name: 'Capacity', width: 150, sortable: false,search: false, editable: false, editrules: { required: true } }, 

          { 
           name: 'ContractDetails', search: false, sortable: false, formatter: function (cellvalue) 
          { 
           var i, res = "", linkInfo; 

           if (cellvalue == null || !$.isArray(cellvalue)) { 
            return "&nbsp;"; // empty cell in case or error 
           } 

           for (i = 0; i < cellvalue.length; i++) { 
            linkInfo = cellvalue[i]; 
            res += (res.length > 0 ? "<br/> " : "") + 
             '<a href="' + linkInfo.LinkSrc + '" target="_blank" >' + 
             linkInfo.LinkText + '</a>'; 
           } 

           return res; 
          } 
           }        

    ], 

    rowList : [10,20,30,50],   
    viewrecords: true,   
    gridview: true, 
    sortable: false, 
    loadonce: false, 
    cellsubmit: 'clientArray', 
    autowidth: true, 
    pager: '#DetailGridPager',    

}); 
jQuery("#DetailGrid").trigger('reloadGrid'); 

$("#DetailGrid").jqGrid('navGrid', '#DetailGridPager', { edit: false, add: false, del: false, search: false, refresh: false }); 
$('#DetailGrid').jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, enableClear: false, defaultSearch: 'cn' }); 

를 다음과 같이 내 컨트롤러는 다음과 같습니다

public JsonResult GetAutocompleteData(string term) 
    { 
     var cxt = new AppDataContext(); 
     return Json(cxt.Order.Where(t => t.ContactOrderNo.Contains(term)).Select(t => new { value = t.ContactOrderNo }).ToList(), JsonRequestBehavior.AllowGet); 

    } 
+1

아마'.Take (100)'또는'GetAutocompleteData' (원인의'.ToList()')의 명령문에 다른 제한을 추가해야합니다. 이 경우 GetAutocompleteData 메소드는 최대 100 개의 항목을 반환합니다. 또한 select2 [데모] (http://www.ok-soft-gmbh.com/jqGrid/UsageFormetterSelect2.htm) [대답] (http://stackoverflow.com/a)에서 사용하려고하는 것이 좋습니다 것입니다./19427444/315935). 사람이 선택할 필요가있는 많은 항목을 가지고 있다면 도움이 될 수 있습니다. – Oleg

+0

빠른 응답을 주셔서 감사합니다 올레그! 내 유스 케이스에 따르면 나는 선호합니다 .Take (100) 옵션보다는 select2지만, 어떤 경우에는 Select2가 필요하므로 데모를 공유해 주셔서 감사합니다. – tom

+0

당신은 오신 것을 환영합니다! 내 프로젝트에서 Autocomplete와 select2를 모두 사용합니다. '.Take (100)'의 사용법이 문제를 해결할 수 있습니까? – Oleg

답변

1

하나는 .ToList() 전에 예를 .Top(100) 또는 .Top(20)를 들어, GetAutocompleteData.Top의 호출을 추가 할 수 있습니다. 해당 SELECT.의 결과를 줄입니다. 가능한 경우 .Contains 대신 .StartsWith을 사용해야합니다. SELECT가 데이터베이스의 인덱스를 사용할 수있는 경우에는 ContactOrderNo 필드에 존재합니다.