jQgrid: данные не загружены

Question

Я пытаюсь использовать jQgrid, но таблица не может загрузить данные. В фоновом режиме есть какой-то трансапарентный пользовательский интерфейс черного блока. Ответ Json я получил это:

  {"total":"1","page":"1","records ":"10", 
     "rows":[ 
     {"id":"26010","cell":[26010,303,100,""]}, 
     {"id":"26009","cell":[26009,303,100,""]}, 
     {"id":"26008","cell":[26008,303,100,""]}, 
     {"id":"26007","cell":[26007,303,100,""]}, 
     {"id":"26006","cell":[26006,303,100,""]}, 
     {"id":"26005","cell":[26005,303,100,""]}, 
     {"id":"26004","cell":[26004,303,100,""]}, 
     {"id":"26003","cell":[26003,303,100,""]}, 
     {"id":"26002","cell":[26002,303,100,""]}, 
     {"id":"26001","cell":[26001,303,100,""]}]} 

страница:

<table id="list3"></table> 
<div id="pager3"></div> 
<table id="navgrid"></table> 
<div id="pagernav"></div> 
<script> 
$(document).ready(function(){ 
$("#list3").jqGrid({ 
     url:'<%=getForecastedTransactionURL%>', 
     mtype:'POST', 
     datatype : 'json', 
     colNames : [ 'Txn Id', 'Transaction Type', 'Amount', 'Description'], 
     colModel : [ { 
      name : 'id', 
      index : 'id', 
      sorttype : "int", 
      hidden:true 
     }, { 
      name : 'transactionType', 
      index : 'transactionType', 
      width : 100 
     }, { 
      name : 'amount', 
      index : 'amount', 
      width : 80, 
      align : "right", 
      sorttype : "number" 
     }, { 
      name : 'description', 
      index : 'description', 
      width : 80, 
      align : "right", 
      sorttype : "text" 
     }], 
     multiselect : true, 
     rowNum : 20, 
     rowList : [ 10, 20, 30 ], 
     pager : '#pager3', 
     sortname : 'transactionType', 
     viewrecords : true, 
     sortorder : "desc", 
     loadonce : true, 
     caption : "Load Once Example" 
    }); 
}); 
</script> 

Что мне не хватает?

Answer 1

Код JavaScript, который вы используете, является правильным и соответствует данным JSON, которые возвращаются с сервера. The demo демонстрируют, что код должен работать. В демо я сделал только незначительные изменения (добавлена ​​опция height: "auto", gridview: true и увеличена ширина столбца description, чтобы увидеть результаты в пейджере более ясно. Я удалил mtype:'POST' только потому, что моя демонстрация загружает данные непосредственно из файла на HTTP GET). Я рекомендую вам сравнить свое демо с моим. Кроме того, я рекомендую использовать обратный вызов loadError (см. the answer), который может помочь диагностировать ошибки при загрузке сетки. Я надеюсь, что описание ошибки поможет вам найти ошибку в вашем коде. Типичная ошибка может быть неправильной Content-Type ответа HTTP.

Дополнительная небольшая оптимизация, которую я вам предлагаю, следующая. Формат JSON, который вы в настоящее время производят на сервере, содержит много ненужной информации и дубликатов информации id. Вы включили в настоящее время скрытый столбец id, который на самом деле не требуется. Каждая строка jqGrid имеет атрибут id. Вы можете использовать это значение вместо использования скрытого скрытого столбца. Например, вы можете изменить свой код для получения данных

[ 
    [303,100,"",26010], 
    [303,100,"",26009], 
    [303,100,"",26008], 
    [303,100,"",26007], 
    [303,100,"",26006], 
    [303,100,"",26005], 
    [303,100,"",26004], 
    [303,100,"",26003], 
    [303,100,"",26002], 
    [303,100,"",26001] 
] 

добавить jsonReader вариант и изменить colModel к

colModel : [{ 
    name : 'transactionType', 
    width : 100 
}, { 
    name : 'amount', 
    width : 80, 
    align : "right", 
    sorttype : "number" 
}, { 
    name : 'description', 
    width : 280, 
    align : "right" 
}], 
jsonReader: {id: 3} 

Такие jsonReader указывают, что 3-й элемент массива элемента является значение id. В результате у вас будет сетка, которая будет выглядеть как предыдущая демонстрация (см. Новую демо-версию here). На приведенном ниже рисунке показано, что ряды по-прежнему установлены правильно