2016-10-10 10 views
-1

JSON을 통해 jqGrid에 500 개 이상의 레코드를 바인딩 할 수 없습니다. 요구 사항은 jqGrid의 150000 레코드를 바인딩하고 페이지 매김을 추가하는 것입니다.json을 통해 jQgrid에 500 개가 넘는 레코드를 바인딩 할 수 없습니다.

SELECT 쿼리에 TOP 400을 추가하면 레코드를 볼 수 있지만 TOP 500은 공백으로 표시됩니다.

$(document).ready(function() { 
    jQuery("#jQGridRawData").jqGrid({ 
     url: 'Transaction.aspx/GetData', 
     datatype: 'json', 
     mtype: 'POST', 
     height: 'auto', 
     serializeGridData: function(postData) { 
      return JSON.stringify(postData); 
     }, 
     ajaxGridOptions: { 
      contentType: "application/json" 
     }, 
     colNames: ["ID", "Pos", "Dep", "Systems", "Batch ID", "Check", "Code", "Amount"], 
     colModel: [{ 
      name: 'testpmsID', 
      index: 'testpmsID', 
      width: 60, 
      sortable: false, 
      search: false, 
      align: 'center' 
     }, { 
      name: "PostingDate", 
      index: "PostingDate", 
      width: 126, 
      align: 'center', 
      search: true, 
      sorttype: 'date', 
      formatter: 'date', 
      formatoptions: { 
       newformat: 'm-d-y' 
      }, //formatoptions: { srcformat: 'd/m/Y', newformat: 'd/m/Y'} 
      searchoptions: { 
       dataInit: function(element) { 
        $(element).datepicker({ 
         autoclose: true, 
         format: 'mm-dd-yy', 
         orientation: 'left' 
        }); 
       }, 
       sopt: ['eq', "ge", "le"], 
       clearSearch: false 
      } 
     }, { 
      name: "DepositDate", 
      index: "DepositDate", 
      width: 126, 
      align: 'center', 
      search: true, 
      sorttype: 'date', 
      formatter: 'date', 
      formatoptions: { 
       newformat: 'm-d-y' 
      }, 
      searchoptions: { 
       dataInit: function(element) { 
        $(element).datepicker({ 
         autoclose: true, 
         format: 'mm-dd-yy', 
         orientation: 'left' 
        }); 
       }, 
       sopt: ['eq', "ge", "le"], 
       clearSearch: false 
      } 
     }, { 
      name: "Systems", 
      index: "Systems", 
      width: 110, 
      align: 'left', 
      searchoptions: { 
       sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'], 
       clearSearch: false 
      } 
     }, { 
      name: "BatchID", 
      index: "BatchID", 
      width: 100, 
      sorttype: 'number', 
      align: 'left', 
      searchoptions: { 
       sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'], 
       clearSearch: false 
      } 
     }, { 
      name: "CheckNumber", 
      index: "CheckNumber", 
      width: 140, 
      align: 'left', 
      searchoptions: { 
       sopt: ['eq', 'ne', 'le', 'lt', 'gt', 'ge'], 
       clearSearch: false 
      } 
     }, { 
      name: "PaymentCode", 
      index: "PaymentCode", 
      width: 175, 
      align: 'left', 
      search: true, 
      searchoptions: { 
       sopt: ['eq', "ge", "le"], 
       clearSearch: false 
      } 
     }, { 
      name: "PaymentAmount", 
      index: "PaymentAmount", 
      width: 160, 
      align: 'right', 
      search: true, 
      searchoptions: { 
       sopt: ['eq', "ge", "le"], 
       clearSearch: false 
      }, 
      formatter: 'currency', 
      formatoptions: { 
       prefix: '$ ', 
       thousandsSeparator: ',', 
       decimalPlaces: 2 
      } 
     }], 
     pager: "#jQGridRawDataPager", 
     rowNum: 20, 
     rowTotal: 2000, 
     rowList: [20, 30, 50], 
     loadonce: true, 
     //rownumbers: true, 
     //add: false, 
     //edit: false, 
     width: '100%', 
     hidegrid: false, 
     viewrecords: true, 
     headertitles: true, 
     responsive: true, 
     styleUI: 'Bootstrap', 
     shrinkToFit: false, 
     forceFit: false, 
     hoverrows: false, 
     //gridview: true, 
     viewsortcols: [false, 'vertical', true], 
     jsonReader: { 
      page: function(obj) { 
       return 1; 
      }, 
      total: function(obj) { 
       return 1; 
      }, 
      records: function(obj) { 
       return obj.d.length; 
      }, 
      root: function(obj) { 
       return obj.d; 
      }, 
      repeatitems: false, 
      id: "0" 
     } 
    }); //grid intiallization code end 

    // Setup buttons 
    jQuery("#jQGridRawData").jqGrid('navGrid', '#jQGridRawDatPager', { 
     edit: false, 
     add: false, 
     del: false, 
     search: true 
    }, { 
     height: 200, 
     reloadAfterSubmit: true 
    }); 

    // Setup filters 
    jQuery("#jQGridRawData").jqGrid('filterToolbar', { 
     defaultSearch: true, 
     stringResult: true, 
     searchOperators: true 
    }); 
}); 
[WebMethod] 
public static List<Dictionary<string, object>> GetRawData() 
{ 
    SqlConnection sqlConnection = new SqlConnection(); 
    sqlConnection.ConnectionString = ConfigurationManager.ConnectionStrings["abcd"].ConnectionString; 
    sqlConnection.Open(); 
    string sqlStatement = "SELECT * FROM tablename"; 
    SqlDataAdapter sqlDataAdapter = new SqlDataAdapter(sqlStatement, sqlConnection); 
    DataTable dtResult = new DataTable(); 
    sqlDataAdapter.Fill(dtResult); 
    System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); 
    List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>(); 
    Dictionary<string, object> row; 
    foreach (DataRow dr in dtResult.Rows) 
    { 
     row = new Dictionary<string, object>(); 
     foreach (DataColumn col in dtResult.Columns) 
     { 
      row.Add(col.ColumnName, dr[col]); 
     } 
     rows.Add(row); 
    } 
    return rows; 
} 
+1

를 추가'내 요구 사항이있는 jqGrid에서 150000 개 기록을 결합하고 서버에 페이지 매김을 난 강력하게 건의 할 것 pagination'을 추가하는 것입니다 . 브라우저에 150,000 레코드를 덤프하는 것은 단지 나쁜 시간을 요구하는 것입니다. –

+0

jqgrid를 사용하여 서버 쪽에서 페이지 매김을 추가하는 방법은 무엇입니까? 너 나에게 링크를 보내 줄 수 있니? –

답변

0

1) 우리는 우리의 maxJsonLength 초과인지 여부를 확인해야합니다 : 다음은 내 코드입니다.

무엇을 : Web.config를 이동하고 다음 코드

<system.web.extensions> 
    <scripting> 
     <webServices> 
      <!-- Try increasing this value to a larger value (Int.MaxValue used below) --> 
      <jsonSerialization maxJsonLength="2147483644"></jsonSerialization> 
     </webServices> 
    </scripting> 
</system.web.extensions>