JQgrid : JSON 데이터에서 테이블을 올바르게 렌더링하지 않습니다.

Question

다음 JSON 데이터 서비스가 있고 JQgrid를 사용하여 표를 생성하려고합니다. JSON 데이터를 사용할 때 어떤 이유로 아무것도 렌더링하지 않습니다.

jqgrid가 JSON 데이터에서 테이블 그리드를 렌더링하도록 어떻게 수정해야합니까? 여기

내 fiddle

MY있는 jqGrid입니다

$("#output").jqGrid({ 
    url: "/echo/json/", 
    mtype: "POST", 
    datatype: "json", 
    postData: { 
      json: JSON.stringify(jsonData) 
    }, 
    colModel: [ 
     /** { name: 'ClientID', label:'ClientID',width: 80, key: true },****/ 
     { 
     name: 'fdicCertificateNumber', 
     width: 65, 
      formatter: "showlink", 
      formatoptions: { 
       baseLinkUrl: "http://www.cnn.com", 
       idName: "", 
       addParam: function (options) { 
        return { 
         fdicCertificateNumber: options.rowData.fdicCertificateNumber, 
         bName:options.rowData.bName 
        }; 
       } 
      } 
     }, { 
     name: 'bName', 
     width: 165 
     }, { 
     name: 'address', 
     align: 'right', 
     width: 85 

     }, { 
     name: 'state', 
     label: 'Share Price', 
     align: 'right', 
     width: 100, 

     }, 
     /*{ label: 'Value1', 
        name: 'Value1', 
        width: 80, 
        sorttype: 'number', 
        formatter: 'number', 
        align: 'right' 
       }, */ 
     { 
     name: 'lastModifiedDateTime', 
     label: 'Total Value', 
     width: 160, 

     }, { 
     name: 'regulatorFull', 
     label: 'LTV Ratio', 
     width: 70, 
     sorttype: 'number', 
     align: "right", 

     }, { 
     name: 'bankHoldingCompany', 
     label: 'bankHoldingCompany', 
     classes: "hidden-xs", labelClasses: "hidden-xs", 
     width: 120, 
     width: 165 
     }, 

     { 
     name: 'charterClassFull', 
     label: 'MaxLoanAmount', 
     width: 165, 
     sorttype: 'number', 

     } 

    ], 
    additionalProperties: ["Num1"], 
    /*beforeProcessing: function (data) { 
     var item, i, n = data.length; 
     for (i = 0; i < n; i++) { 
      item = data[i]; 
      item.Quantity = parseFloat($.trim(item.Quantity).replace(",", "")); 
      item.LTVRatio = parseFloat($.trim(item.LTVRatio *10000).replace(",", "")); 
      item.Value = parseFloat($.trim(item.Value).replace(",", "")); 
      item.Num1 = parseInt($.trim(item.Num1).replace(",", ""), 10); 
      item.Num2 = parseInt($.trim(item.Num2).replace(",", ""), 10); 
     } 
    }, */ 
    iconSet: "fontAwesome", 
    loadonce: true, 
    rownumbers: true, 
    cmTemplate: { 
     autoResizable: true, 
     editable: true 
    }, 
    autoResizing: { 
     compact: true 
    }, 
    autowidth: true, 
    height: 'auto', 
    forceClientSorting: true, 
    sortname: "Symbol", 
    footerrow: true, 
    caption: "<b>Collateral Value</b> <span class='pull-right' style='margin-right:20px;'>Valuation as of: " + mmddyyyy + "</span>", 


    loadComplete: function() { 
     var $self = $(this), 
     sum = $self.jqGrid("getCol", "Price", false, "sum"), 
     sum1 = $self.jqGrid("getCol", "MaxLoanAmt", false, "sum"); 
     //ltvratio = $self.jqGrid("getCol","LTVRatio:addas", "Aved Loan Amount"); 
     $self.jqGrid("footerData", "set", { 
     LTVCategory: "Max Approved Loan Amount:", 
     Price: sum, 
     MaxLoanAmt: sum1 
     }); 
    } 
    }); 

    $("#output").jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch : "cn"}); 


    $(window).on("resize", function() { 
     var newWidth = $("#output").closest(".ui-jqgrid").parent().width(); 
     $("#output").jqGrid("setGridWidth", newWidth, true); 
    }); 

JSON

[ 
    { 
    "rank": { 
     "fdicCertificateNumber": 3510, 
     "bName": "rank , National Association", 
     "bFullName": "rank , National Association", 
     "address": "100 NORTH TRYON ST", 
     "city": "CHARLOTTE", 
     "state": "NC", 
     "zip": "28202", 
     "lastModifiedDateTime": "Oct 20, 2016", 
     "regulatorShort": "OCC", 
     "regulatorFull": "Office of the Comps", 
     "assetConcentration": "All Other > $1 Billion", 
     "charterClassShort": "N", 
     "charterClassFull": "National rank, Member", 
     "timePeriod": "201606", 
     "bankHoldingCompany": "rank CORPORATION", 
     "nameQtr": "2016 Q2", 
     "status": "Active" 
    }, 
    "Analytics": { 
     "fdicCertificateNumber": 3510 
    }, 
    "metricsList": [] 
    }, 
    { 
    "rank": { 
     "fdicCertificateNumber": 3511, 
     "bName": "rank, National Association", 
     "bFullName": " rank, National Association", 
     "address": "10 N. PHILLIPS AVENUE", 
     "city": "SIOUX FALLS", 
     "state": "SD", 
     "zip": "57104", 
     "lastModifiedDateTime": "Oct 20, 2016", 
     "regulatorShort": "OCC", 
     "regulatorFull": "Office of the Electric company", 
     "assetConcentration": "All Other > $1 Billion", 
     "charterClassShort": "N", 
     "charterClassFull": "National rank, Member", 
     "timePeriod": "201606", 
     "bankHoldingCompany": "WELLS FARGO & COMPANY", 
     "nameQtr": "2016 Q2", 
     "status": "Active" 
    }, 
    "Analytics": { 
     "fdicCertificateNumber": 3511 
    }, 
    "metricsList": [] 
    }, 
    { 
    "rank": { 
     "fdicCertificateNumber": 14028, 
     "bName": "First Guaranty rank", 
     "bFullName": "First Guaranty rank", 
     "address": "400 GUARANTY SQUARE", 
     "city": "HAMMOND", 
     "state": "LA", 
     "zip": "70401", 
     "lastModifiedDateTime": "Oct 20, 2016", 
     "regulatorShort": "IC", 
     "regulatorFull": " Corporation", 
     "assetConcentration": "Commercial a Specialization", 
     "charterClassShort": "NM", 
     "charterClassFull": "State rank, Non-Member", 
     "timePeriod": "201606", 
     "bankHoldingCompany": "FIRST GUARANTY BANCSHARES, INC.", 
     "nameQtr": "2016 Q2", 
     "status": "Active" 
    }, 
    "Analytics": { 
     "fdicCertificateNumber": 14028 
    }, 
    "metricsList": [] 
    }, 

    { 
    "rank": { 
     "fdicCertificateNumber": 58564, 
     "bName": " rank", 
     "bFullName": " rank", 
     "address": "260E RXR PLAZA", 
     "city": "UNIONDALE", 
     "state": "NY", 
     "zip": "11556", 
     "lastModifiedDateTime": "Oct 20, 2016", 
     "regulatorShort": "IC", 
     "regulatorFull": " Corporation", 
     "assetConcentration": "Commercial Specialization", 
     "charterClassShort": "NM", 
     "charterClassFull": "State rank, Non-Member", 
     "timePeriod": "201606", 
     "bankHoldingCompany": " CORPORATION", 
     "nameQtr": "2016 Q2", 
     "status": "Active" 
    }, 
    "Analytics": { 
     "fdicCertificateNumber": 58564 
    }, 
    "metricsList": [] 
    } 
] 

Answer 1

당신이 질문에 포함 된 JSON 데이터가 정확하지만 JSFiddle 데모의 데이터가 있습니다 어레이 위에 불필요한 {}을 두었 기 때문에 잘못되었습니다. 입력 데이터를 수정 한 후 jsonmap 속성 (예 : http://jsfiddle.net/OlegKi/615qovew/98/)을 사용하여 입력 데이터를 올바르게 구문 분석하거나 jsonReader: { cell: "rank" }을 사용할 수 있습니다 (http://jsfiddle.net/OlegKi/615qovew/100/ 참조).