복붙노트

[SPRING] jqGrid는 json을 가져 왔지만 빈 행과 데이터가 없습니다.

SPRING

jqGrid는 json을 가져 왔지만 빈 행과 데이터가 없습니다.

{
    "total": "1",
    "page": "1",
    "records": "2",
    "rows": [
        {
            "id": "1",
            "cell": {
                "accountId": 1,
                "userId": 1,
                "transactionId": 6,
                "subCatId": 0,
                "accountName": "Credit Card",
                "remarks": "Movie Hall Pass",
                "amount": 250.0,
                "transactionDate": "2011-03-16",
                "subCatName": "Entertainment"
            }
        },
        {
            "id": "2",
            "cell": {
                "accountId": 2,
                "userId": 1,
                "transactionId": 7,
                "subCatId": 1,
                "accountName": "Savings Bank",
                "remarks": "Part at Besand Nagar",
                "amount": 5000.0,
                "transactionDate": "2011-03-16",
                "subCatName": "Dine Out"
            }
        }
    ]
}
$("#transactionLogTable").jqGrid({
                url: '/et/transaction/getTransactions?dateValue=03%2F16%2F2011',
                datatype: "json",
                loadError: function(xhr,status,error){alert(status+" "+error);},
                colNames:['Transaction ID', 'User ID', 'Subcat ID', 'Subcat Name',
                          'Account ID', 'Account Name', 'Date', 'Amount', 'Notes'],

                colModel:[
                    {name: 'transactionId', index: 'transactionId', width: 100},
                    {name: 'userid', index: 'userId', width: 100},
                    {name: 'subCatId', index: 'subCatId', width: 100},
                    {name: 'subCatName', index: 'subCatName', width: 100},
                    {name: 'accountId', index: 'accountId', width: 100},
                    {name: 'accountName', index: 'accountName', width: 100},
                    {name: 'transactionDate', index: 'transactionDate', width: 100},
                    {name: 'amount', index: 'amount', width: 100},
                    {name: 'remarks', index: 'remarks', width: 100}
                ],
                pager: "#pager",
                rowNum: 10,
                rowList: [10,20,30],
                sortname: 'userId',
                sortorder: 'asc',
                viewrecords: true,
                caption: 'Transactions'
            });

서버는 다음과 같이 QueryString으로 성공적으로 히트되었습니다 :

dateValue=03%2F16%2F2011&_search=false&nd=1300532086871&rows=10&page=1&sidx=userId&sord=asc

이제는 jqGrid가 표시되고 2 개의 빈 행이있는 화면이 표시됩니다. 행에 데이터를 표시 할 수 없습니다.

나는 그것이 매핑과 관련된 것이라고 생각하지만 가능한 한 많은 조합을 시도했다.

포함 된 파일 및 버전 :

<script type="text/javascript" language="javascript" src="/et/resources/js/jquery.jqGrid-3.8.2.full/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript" src="/et/resources/js/jquery-ui-1.8.10.start/js/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript" language="javascript" src="/et/resources/js/form-2.52.js"></script>
<script type="text/javascript" language="javascript" src="/et/resources/js/validate-1.7.js"></script>
<script type="text/javascript" language="javascript" src="/et/resources/js/jquery.jqGrid-3.8.2.full/js/i18n/grid.locale-en.js" charset="utf-8"></script>
<script type="text/javascript" language="javascript" src="/et/resources/js/jquery.jqGrid-3.8.2.full/js/jquery.jqGrid.min.js"></script>

당신의 도움을 주셔서 감사합니다.

Firdous 아미르

해결법

  1. ==============================

    1.귀하의 주요 오류는 데이터 형식이 잘못되었습니다. 당신은 사용해야합니다.

    귀하의 주요 오류는 데이터 형식이 잘못되었습니다. 당신은 사용해야합니다.

    {
        "total": "1",
        "page": "1",
        "records": "2",
        "rows": [
            {
                "id": "1",
                "cell": ["1", "1", "6", "0", "Credit Card", "Movie Hall Pass",
                         "250.0", "2011-03-16", "Entertainment" ]
            },
            ...
        ]
    }
    

    대신에

    {
        "total": "1",
        "page": "1",
        "records": "2",
        "rows": [
            {
                "id": "1",
                "cell": {
                    "accountId": 1,
                    "userId": 1,
                    "transactionId": 6,
                    "subCatId": 0,
                    "accountName": "Credit Card",
                    "remarks": "Movie Hall Pass",
                    "amount": 250.0,
                    "transactionDate": "2011-03-16",
                    "subCatName": "Entertainment"
                }
            },
            ...
        ]
    }
    

    일반적으로 jqGrid는 거의 모든 JSON 데이터를 읽을만큼 유연합니다. jsonReader jqGrid 매개 변수와 언젠가 추가적으로 jsonmap 속성을 열 정의에 정의 할 수 있습니다. 예를 들어 다음 jqGrid 정의를 사용하여 데이터를 읽을 수 있습니다.

    $("#transactionLogTable").jqGrid({
        // ... other parameters
        cmTemplate: {width: 100},
        colModel:[
            {name:'transactionId',   jsonmap: 'cell.transactionId'},
            {name:'userId',          jsonmap: 'cell.userId'},
            {name:'subCatId',        jsonmap: 'cell.subCatId'},
            {name:'subCatName',      jsonmap: 'cell.subCatName'},
            {name:'accountId',       jsonmap: 'cell.accountId'},
            {name:'accountName',     jsonmap: 'cell.accountName'},
            {name:'transactionDate', jsonmap: 'cell.transactionDate'},
            {name:'amount',          jsonmap: 'cell.amount'},
            {name:'remarks',         jsonmap: 'cell.remarks'}
        ],
        height: "auto",
        jsonReader: { repeatitems: false }
    });
    

    여기서는 jsonReader : {repeatitems : false}를 사용하여 행의 JSON 데이터가 배열에 있지만, 명명 된 속성이있는 객체에 대해 정의되지 않았 음을 정의합니다. jsonmap : "cell.userId"와 같은 속성은 해당 그리드 열의 값이 행 객체의 기본 userId 속성이 아니고 "cell"속성의 자식이어야 함을 지정하는 데 필요합니다. 그런데 JSON 데이터에서 'userid'를 열 이름으로 사용하고 'userId'를 사용합니다. JSON 데이터와 동일한 이름을 사용하는 것이 좋습니다. 'name'과 동일한 'index'속성을 사용하면 'index'를 삭제할 수 있습니다. 이 경우 'name'속성의 값이 '색인'으로 사용됩니다.

    눈금의 모든 열에 "width : 100"속성을 사용했기 때문에 cmTemplate : {width : 100} 매개 변수를 사용하여 colModel 정의를 더 짧게 만들고 읽을 수있게했습니다.

    수정 된 그리드는 여기에서 볼 수 있습니다.

    YYYY-mm-dd ISO 형식으로 항상 날짜를 게시하고 colModel의 'date'및 datefmt 속성 (예 : 포맷터 : 'date', formatoptions : {newformat : 'dm-Y'})을 사용하는 것이 좋습니다. datefmt : 'dm-Y')

  2. from https://stackoverflow.com/questions/5361678/jqgrid-fetched-json-but-has-empty-rows-and-no-data by cc-by-sa and MIT license