jqgrid Данные не заполняют сетку

Question

Это моя первая попытка с JQgrid, и я запутался в документации, что мне нужен атрибут jsonmap с моим colmodel. На данный момент я получаю все данные, но из firebug я вижу, что все, что я получаю в каждом столбце, это:

<td aria-describedby="list_MEMBERID" title="" style="" role="gridcell">&nbsp;</td>

Может кто-нибудь объяснить, что именно я делаю неправильно?

Json:

{
"ROWS": [
    {
        "ID": 508,
        "CELLS": {
            "PHONE": "847-382-8872",
            "STATE": "IL",
            "ZIP": 60010,
            "NAME": "Norton's U.S.A.",
            "DESC": "We sell only products made in the United States!We offer an eclectic mix of common household items from toys to tools, glassware to garden supplies, fashions to food and so much more.  When you shop at Norton's U.S.A, you help keep America working!  ",
            "CITY": "Riverwoods",
            "ADDR": "400 Lageschulte Street"
        }
    }
],
"PAGE": 1,
"RECORDS": 1,
"TOTAL": 1
}

Javascript:

$(function(){ 
  $("#list").jqGrid({
    url:'cfc/buildData.cfc?method=getDining',
    datatype: 'json',
    mtype: 'GET',
    colNames:['Member ID','Member Name', 'Address','City','Zip Code','State', 'Phone', 'Description'],
    colModel :[ 
      {name:'MEMBERID', index:'MEMBERID', jsonmap:'MEMBERID', width:60}, 
      {name:'NAME', index:'NAME', jsonmap:'NAME', width:90}, 
      {name:'ADDR', index:'ADDR', jsonmap:'ADDR', width:80, align:'right'},
      {name:'CITY', index:'CITY', jsonmap:'CITY', width:80, align:'right'}, 
      {name:'ZIP', index:'ZIP', jsonmap:'ZIP', width:80, align:'right'},
      {name:'STATE', index:'STATE', jsonmap:'STATE', width:80, align:'right'},
      {name:'PHONE', index:'PHONE', jsonmap:'PHONE', width:80, align:'right'},  
      {name:'DESC', index:'DESC', jsonmap:'DESC', width:200, sortable:false} 
    ],
    pager: '#pager',
    rowNum: 10,
    rowList:[10,20,30],
    sortname: 'MEMBERID',
    sortorder: 'desc',
    viewrecords: true,
    gridview: true,
    caption: 'Lake County Members',

    jsonReader : {
       root: "ROWS",
       page: "PAGE",
       total: "TOTAL",
       records: "RECORDS",
       repeatitems: true,
       cell: "CELLS",
       id: "MEMBERID",
       subgrid: {root:"ROWS", 
          repeatitems: true, 
          cell:"CELLS"
       }
     }

  }); 
});

Answer 1

Документация о jsonReader и jsonmap действительно сложна для первого чтения.

Наиболее важным свойством jsonReader является repeatitems.Значение по умолчанию repeatitems: true.Это означает, что формат строк данных в JSON должен быть

{"id" :"1", "cell": ["cell11", "cell12", "cell13"]}

Важно отметить, что свойство cell должно иметь массив строк в качестве значения. Свойство jsonmap colModel будет игнорироваться .

Если вы просто используете jsonReader: {repeatitems: true}, вы перезапишете только одно свойство по умолчанию jsonReader.Поэтому формат данных, представляющих строку на входе JSON, должен быть

{"id": "abc", "col1": false, "col3": 123, "col2": "cell12"}

. В случае нет cell, свойство должно использоваться во входных данных.Данные для столбца будут обозначаться по имени вместо позиции в массиве cell.Имя свойства col1, col2, col3 может быть либо из свойства name colModel, либо из jsonmap, если оно определено.

В случае более сложного форматавведите

{"id": "abc", "col1": false, "coordinates": {"x": 123, "y": "cell12"}}

, который вы можете определить для x столбца jsonmap: coordinates.x и для y столбца jsonmap: coordinates.y.

В случае вашего примера я бы рекомендовал вамизмените формат данных JSON на

{
    "ROWS": [
        {
            "ID": 508,
            "PHONE": "847-382-8872",
            "STATE": "IL",
            "ZIP": 60010,
            "NAME": "Norton's U.S.A.",
            "DESC": "We sell only products made in the United States!We offer an eclectic mix of common household items from toys to tools, glassware to garden supplies, fashions to food and so much more.  When you shop at Norton's U.S.A, you help keep America working!  ",
            "CITY": "Riverwoods",
            "ADDR": "400 Lageschulte Street"
        }
    ],
    "PAGE": 1,
    "RECORDS": 1,
    "TOTAL": 1
}

• , чтобы удалить 'MEMBERID' из модели столбца, поскольку вы не включили никаких данных во входные данные JSON.
• remove sortname: 'MEMBERID' или измените его на некоторые существующие столбцы.
• удалите все jsonmap свойства

jsonReader следует использовать как

jsonReader : {
     root: "ROWS",
     page: "PAGE",
     total: "TOTAL",
     records: "RECORDS",
     repeatitems: false,
     id: "ID",
 }

ЗначениеИдентификаторы строк сетки (идентификаторы для <tr> элементов таблицы) будут получены из свойства 'ID' входных данных JSON.Вы должны быть осторожны со значениями для идентификаторов: на всей странице должно быть уникальных .

После вышеуказанных изменений в сетке будут отображаться данные: см. демо .Я добавил параметр height: 'auto' только для уменьшения размера ненужного пространства в сетке.