jqGrid с ASP.NET MVC Основы Отображение данных нет

Question

У меня было около 3 лет, пытаясь изучить jqGrid. Каждый раз проваливался. Поэтому на этот раз я попытался начать с основ. Все, что я хотел сделать, это реплицировать пример данных json по адресу http://trirand.com/blog/jqgrid/jqgrid.html.

Мои лучшие усилия привели к тому, что в таблице со строками и столбцами каждая ячейка имеет в ней неразрывное пространство.

С моим кодом я только отступил от кода в этом примере, чтобы объяснить тот факт, что я не получал данные из одной и той же службы данных. Но я получал точно такие же данные, как я смог извлечь json с помощью скрипача.

Код:

function getData() { 

    var obj = 
    { 
     "page": "1", 
     "total": 2, 
     "records": "13", 
     "rows": [{ 
      "id": "13", 
      "cell": ["13", 
      "2007-10-06", 
      "Client 3", 
      "1000.00", 
      "0.00", 
      "1000.00", 
      null] 
     }, 
     { 
      "id": "12", 
      "cell": ["12", 
      "2007-10-06", 
      "Client 2", 
      "700.00", 
      "140.00", 
      "840.00", 
      null] 
     }, 
     { 
      "id": "11", 
      "cell": ["11", 
      "2007-10-06", 
      "Client 1", 
      "600.00", 
      "120.00", 
      "720.00", 
      null] 
     }, 
     { 
      "id": "10", 
      "cell": ["10", 
      "2007-10-06", 
      "Client 2", 
      "100.00", 
      "20.00", 
      "120.00", 
      null] 
     }, 
     { 
      "id": "9", 
      "cell": ["9", 
      "2007-10-06", 
      "Client 1", 
      "200.00", 
      "40.00", 
      "240.00", 
      null] 
     }, 
     { 
      "id": "8", 
      "cell": ["8", 
      "2007-10-06", 
      "Client 3", 
      "200.00", 
      "0.00", 
      "200.00", 
      null] 
     }, 
     { 
      "id": "7", 
      "cell": ["7", 
      "2007-10-05", 
      "Client 2", 
      "120.00", 
      "12.00", 
      "134.00", 
      null] 
     }, 
     { 
      "id": "6", 
      "cell": ["6", 
      "2007-10-05", 
      "Client 1", 
      "50.00", 
      "10.00", 
      "60.00", 
      ""] 
     }, 
     { 
      "id": "5", 
      "cell": ["5", 
      "2007-10-05", 
      "Client 3", 
      "100.00", 
      "0.00", 
      "100.00", 
      "no tax at all"] 
     }, 
     { 
      "id": "4", 
      "cell": ["4", 
      "2007-10-04", 
      "Client 3", 
      "150.00", 
      "0.00", 
      "150.00", 
      "no tax"] 
     }], 
     "userdata": { 
      "amount": 3220, 
      "tax": 342, 
      "total": 3564, 
      "name": "Totals:" 
     } 
    } 

    return obj; 
} 

$(function() { 
    $("#list2").jqGrid({ 
     data: getData()['rows'], 
     datatype: "local",   
     colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'], 
     colModel: [ 
      { name: 'id', index: 'id', width: 55 }, 
      { name: 'invdate', index: 'invdate', width: 90 }, 
      { name: 'name', index: 'name asc, invdate', width: 100 }, 
      { name: 'amount', index: 'amount', width: 80, align: "right" }, 
      { name: 'tax', index: 'tax', width: 80, align: "right" }, 
      { name: 'total', index: 'total', width: 80, align: "right" }, 
      { name: 'note', index: 'note', width: 150, sortable: false } 
     ], 
     rowNum: 10, 
     rowList: [10, 20, 30], 
     pager: '#pager2', 
     sortname: 'id', 
     viewrecords: true, 
     sortorder: "desc", 
     caption: "JSON Example" 
    }); 
    $("#list2").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false }); 

}); 

Может кто-нибудь, пожалуйста, помогите мне сломать мой очень плохо работать с этой популярной библиотекой JavaScript?

Answer 1

Я не нашел ничего плохого в вашей сетке. С вашими данными что-то не так. Надеюсь, ваши данные должны быть проверены. Кроме того, если вы используете в качестве локального типа данных Ваших данные хотели бы ниже,

var mydata = [ 
{ id: "11", invdate: "2007-10-06", name: "Client 1", amount: "600.00" 
, tax:"120.00", total:"720.00", note: null }, 
{ id: "12", invdate: "2007-10-06", name: "Client 2", amount: "700.00", 
    tax:"140.00", total:"840.00", note: null }, 
{ id: "13", invdate: "2007-10-06", name: "Client 3", amount: "1000.00", 
    tax:"0.00", total:"1000.00", note: null } 
    ]; 

Этого Demo даст вам хороший старт с jQgrid. Я использовал определение вашей сетки. Надеюсь это поможет.