jqGrid가 채워지지 않습니다.

Question

저는 jqGrid를 처음 사용합니다. 나는 나머지 호출을 사용하여 DB에 새로운 객체를 업로드하기 위해 사용자가 편집 할 수있는 여러 개의 체크 박스와 REST 호출에 의해 반환 된 데이터로 채워진 jqGrid를 구현하려고한다. 그리드를 채우는 데 문제가 있습니다.

문제는 그리드가 페이지의 세로 공간을 차지하는 것처럼 보이지만 정보를 표시하지 않는 것입니다. 데이터가없는 표가있는 경우 그리드의 헤더가 잘 표시됩니다.

Chrome에서 디버깅하는 동안 콘솔에서 계산할 때 행 개체에서 반환 될 것으로 예상되는 속성이 없다는 것을 발견했습니다. 그들은 정의되지 않았다. 여기

내가 사용하고있는 코드입니다 : 내가 체크 박스 컬럼과 addRowData 방법의 몇 가지 오버로드에 대한 값을 전달하지 시도

var RGrid = []; 

$.ajax({ 
    url: restApi + EndPoint + '/' + Number, 
    type: 'GET', 
    success: function (response) { 
     Object2 = response; 

     var rData = $('#ResGrid').jqGrid().getRowData(); 

     for (var i = 0; i < Object2.Requests.length; i++) { 
      var existingRows = rData.filter(function (a) { 
       return a.rId == Object2.Requests[i].Resource.Id; 
      }); 
      if (existingRows.length == 0) { 
       var newObj = { 
        a: Object2.Requests[i].Resource.Name, 
        e: Object2.Requests[i].Resource.Id, 
        f: Object2.Requests[i].Id, 
        d: false, 
        b: false, 
        c: false 
       }; 
       RGrid.push(newObj); 
       $('#ResGrid').jqGrid('addRowData', 1, newObj); 
      } 
     } 
    }, 
    error: function (textStatus) { 
     Error('We were unable to retrieve the item'); 
    } 
}); 

$('#ResGrid').jqGrid({ 
    defaults: { 
     emptyrecords: "No items assigned", 
     loadtext: "Loading..." 
    }, 
    data: RGrid, 
    autowidth: true, 
    datatype: "local", 
    colModel: [ 
     { label: 'a', name: 'a', align: 'left', editable: false }, 
     { 
      label: 'b', name: 'b', align: 'center', editable: true, edittype: 'checkbox', 
      editoptions: { value: "True:False" }, 
      formatter: "checkbox", formatoptions: { disabled: false } 
     }, 
     { 
      label: 'c', name: 'c', align: 'center', editable: true, edittype: 'checkbox', 
      editoptions: { value: "True:False" }, 
      formatter: "checkbox", formatoptions: { disabled: false } 
     }, 
     { 
      label: 'd', name: 'd', align: 'center', editable: true, edittype: 'checkbox', 
      editoptions: { value: "True:False" }, 
      formatter: "checkbox", formatoptions: { disabled: false } 
     }, 
     { name: 'e', hidden: true }, 
     { name: 'f', hidden: true } 
    ], 
    rowNum: 1000, 
    height: 'auto', 
    viewrecords: true, 
    caption: "Desc", 
    grouping: false, 
    loadonce: true 
}); 

, 어느 것도 효과가 없었습니다. 흥미롭게도 RGrid 배열에 전달 된 개체는 예상 한 모든 속성 - 값 쌍을 가지고 있으므로 colModel 선언이나 addRowData 메서드를 사용하는 방식에 문제가 있다고 생각됩니다.

편집 :

{ "ID": 나는 서버에서받은 JSON 4, "JobNumber": "PrNum75", "OrderNumber를"널 (null) "QuoteNumber": "1401291641", "QuoteId" : 33, "요청": [{ "ID": 10, "계획된 날짜": [{ "ID": 20, "시간": 4.0, "날짜": "2014-02-20T00 : 00 : 00"}] , "설명": "IPE 관리자", "DefaultRate": 200.0}, "QuoteSection": { "Id": 54, "설명": "Ves", "NumberOf" : 5, "TotalServices": 1000.0, "TotalConsumables": 100.0, "TotalTravel": 5.0, "TotalAmountPerVessel": 1105.0, "TravelExpenses": [{ ""Id ": 26,"AgreedRate ": 3.0,"Quantity ": 1 , "TravelDef": { "Id": 1, "Description": "리소스 & NDT Travel", "UnitDescription": "Km", "DefaultRatePerUnit": 3.0}}, { "Id": 27, "AgreedRate" 2.0, "수량": 1, "TravelDef": { "ID": 2, "설명": "기계 서비스 여행", "UnitDesc "Consumable": "{" "Id": 16, "Quantity": 1, "AgreedPrice": 100.0, "ConsumableDef": { "Id": 3} "Kum", "DefaultRatePerUnit" , "Description": "MT/PT 소모품 캔", "UnitPrice": 100.0}}] "서비스": [{ ""Id ": 17,"ServiceDef ": {"Id ": 1,"Description " "비파괴 검사 - 검사", "DefaultSkill": { "ID": 2, "설명": "CPV", "DefaultRate": 250.0}, "TasksRequired": [{ ""Id ":"Description " "두께 테스트"}, { "ID": 2, "설명": "표면 균열 테스트"}, { "ID": 3, "설명": "보고"}, { "ID": 4, "설명" "NDT 여행", "UnitDescription": "Km", "DefaultRatePerUnit": 3.0}, { "Id": "NDT 여행"}], "TravelDefs" : 2, "설명": "기계 서비스 여행", "UnitDescription": "Km", "DefaultRatePerUnit": 2.0}], "ConsumableDefs": [{ "Id": 3, "Description": "MT/PT ","UnitPrice ": 100.0}]},"DefaultSkill ": {"ID ": 70,"Rate ": 0.0,"SkillDef ": {"Id ": 2,"Description " DefaultRate ": 250.0}},"AgreedSkill ": {"Id ": 69,"Rate ": 250.0,"SkillDef ","설명 ":"IPE Inspector ","DefaultRate ": 200.0}},"ServiceTasks ": [{" "Id : 92,"TaskHours ": 1,"NumberOfShifts ": 1, "NumberOfStaff": 1, "ServiceTaskDef": { "Id": 1, "설명": "두께 테스트"}}, { "ID": 93, "TaskHours": 1, "NumberOfShifts": 1, "NumberOfStaff" 1, "NumberOfShifts": 1, "NumberOfStaff": 1, "ServiceTaskDef": "" 1 ","NumberOfShifts ": 1,"NumberOfStaff ": 1,"ServiceTaskDef ":"ServiceTaskDef " : "ID": 1, "ADUserName": "###", "Name": "매튜 (Matthew)": { "이드": 4, "설명": "NDT 여행"}}}] 스미스 ","SkillDefs ": []}"ServiceDef ": {"Id ": 1,"Description ":"비파괴 검사 - 검사 ","DefaultSkill ": {"Id ": 2,"Description " CPV ","DefaultRate ": 250.0},"TasksRequired ": [{"Id ": 1,"설명 ":"두께 테스트 "}, {"ID ": 2,"설명 ":"표면 균열 테스트} { "Id : 3,"Description ":"보고 "}, {"Id ": 4,"Description ":"NDT Travel "}", "TravelDefs": [{ "Id": "Description" "리소스"UnitDescription": "Km", "DefaultRatePerUnit": 3.0, { "Id": 2, "Description": "기계 서비스 여행", "UnitDescription": "Km", "DefaultRatePerUnit": 2.0 }, "ConsumableDefs": [{ ""Id ": 3,"Description ":"MT/PT 소모품 캔 ","UnitPrice ": 100

저에게 관심있는 부분은 WorkRequests입니다. 여기서 WorkRequests에는 자원의 이름과 ID가 필요합니다.

Answer 1

문제점이 무엇인지 알아 냈습니다. jqGrid를 선언하고 채우는 코드는 스크립트 파일에 있습니다.이 파일은 페이지에서 격자로 작동해야하는 테이블의 선언 위에 참조되었습니다. 내 초보자가하는 기본적인 실수.

나를 도와 줘서 고마워, 그리고 시간을 내서 미안해. C#으로 돌아 오면 ... #

Answer 2

당신은 complete: function(){// here your jqgrid}에서이 일을 시도 할 수 있습니다 :

"loadonce을 : true"로 당신의 데이터 타입으로 사용할 필요는 datatype: "json"을 사용하는 경우 그것은 더 나은

var RGrid = []; 

$.ajax({ 
    url: restApi + EndPoint + '/' + Number, 
    type: 'GET', 
    success: function (response) { 
     Object2 = response; 

     var rData = $('#ResGrid').jqGrid().getRowData(); 

     for (var i = 0; i < Object2.Requests.length; i++) { 
      var existingRows = rData.filter(function (a) { 
       return a.rId == Object2.Requests[i].Resource.Id; 
      }); 
      if (existingRows.length == 0) { 
       var newObj = { 
        a: jobObject2.Requests[i].Resource.Name, 
        b: jobObject2.Requests[i].Resource.Id, 
        c: jobObject2.Requests[i].Id, 
        d: false, 
        e: false, 
        f: false 
       }; 
       RGrid.push(newObj); 
      } 
     } 
    }, 
    error: function (textStatus) { 
     Error('We were unable to retrieve the item'); 
    }, 
    complete: function(){ 

       $('#ResGrid').jqGrid({ 
        defaults: { 
         emptyrecords: "No items assigned", 
         loadtext: "Loading..." 
        }, 
        data: RGrid, 
        autowidth: true, 
        ......... 

    } 
}); 

Answer 3

지역입니다. 의 경우 jqGrid는 서버에 요청합니다. url: restApi + EndPoint + '/' + Number 및 jsonReader과 같은 url 옵션을 사용하면 jsonReader: {root: "Requests", repeatitems: false}과 같이 사용하면됩니다. jqGrid에 응답의 데이터를 찾을 위치를 알려줍니다. 또한 jsonmap 옵션을 사용하여 'a', 'b', 'c' 등의 속성과및 기타 서버 응답의 열을 바인드해야합니다.

formatter: "checkbox"을 가진 'b' 및 'c' 열에 jobObject2.Requests[i].Resource.Id 및 jobObject2.Requests[i].Id의 매핑은 나를 매우 의심 보인다. 가능한 값이 True 또는 False 일 수있는 ID를 갖는 것은 이상합니다. 추가 문제는 루프에 변수 Object2을 사용하지만 루프 본문에서 정의되지 않은 jobObject2을 사용하는 것입니다. 현재 코드의 수정은 최소한 success 또는 complete 콜백 내에서 그리드를 생성하고 jobObject2을 Object2으로 바꾸는 것입니다. 나는 그 문제를 다음 문제로 보게 될 것이다. 현재 질문은 서버에서 반환 된 데이터로 그리드를 채우는 방법입니다. 나는 다음에 대해 같아야 제안

코드 :

$('#ResGrid').jqGrid({ 
    datatype: "json", 
    url: restApi + EndPoint + '/' + Number, 
    gridview: true, 
    autoencode: true, 
    loadonce: true, 
    jsonReader: { 
     root: "Requests", 
     repeatitems: false 
    }, 
    colModel: [ 
     { name: "a", jsonmap: "Resource.Name" }, 
     { name: "b", jsonmap: "Resource.Id", align: "center" }, 
     { name: "c", jsonmap: "Id", align: "center" } 
    ] 
    ... 
}); 

업데이트 : 위의 옵션을 사용하면 게시 된 JSON 데이터의 마지막 버전에서 작동 게시 The demo을 보여줍니다.