jqgrid undefined integer? pager nie ładuje się

Question

IM przy użyciu jqgrids na mvc4, potrzebuję uzyskać prostą listę i wyświetlić ją za pomocą Ajax.

Po załadowaniu strony, siatka rozpoczyna wywołanie Ajax, mam tylko 2 kolumny w siatce, user_id i nazwisko.

Gdy JSON jest ładowany dostanę następny błąd w Google Chrome:

Uncaught Typesetter: Nie można odczytać właściwość 'całkowitą' undefined

i w Firefox, Firebug

Błąd typu: b.jgrid.formatter jest niezdefiniowana

na jquery.jqGrid.src.js: 122

I siatka wykazuje "nieokreśloną" msg też, prąd sterujący pageer isnt załadunek, ale dane są

<table id="GridUsuarios"></table> 
    <div id="PagerUsuarios"></div> 


    <script type="text/javascript"> 
     $(document).ready(function() { 
      jQuery("#GridUsuarios").jqGrid({ 
       url: '@Url.Action("UsuariosGridData","Usuarios")', 
       datatype: "json", 
       myType: 'GET', 
       contentType: "application/json; charset-utf-8",     
       colNames: ['Usuario', 'Nombre'], 
       colModel: [ 
        { name: 'user_id', index: 'user_id', width: 90}, 
        { name: 'nombre', index: 'nombre', width: 200} 
       ], 
       pager: '#PagerUsuarios', 
       rowNum: 10, 
       rowList: [10, 20, 30], 
       viewrecords: true, 
       height: 'auto', 
       sortname: 'nombre', 
       sortorder: 'desc', 
       caption: "Usuarios", 
       jsonReader: { 
        root: "rows", 
        total: "total", 
        page: "page", 
        records: "records", 
        repeatitems: false, 
        id: "user_id" 
       }, 
      });    
     }); 
    </script> 

i mój kontroler:

public JsonResult UsuariosGridData(string sidx = "" , string sord = "", int page = 1, int rows = 10) 
    { 
     var resultado = db_hms.Users//.OrderByDescending(ur => ur.id_user) 
         .Join(db_hms.v_natural_person_short, ur => ur.id_employee, np => np.id_natural_person, (ur, np) => new { Users = ur, Natural_Person = np })//cambiar el idUser por idEmployee la relacion es alrevez XD        
         .Select(s => new { user_id = s.Users.id_user, nombre = s.Natural_Person.name_full }) 
         .ToList(); 



     int vpage = page; 
     int vrows = rows; 
     int counter = (int)Math.Ceiling((float)resultado.Count()/(float)vrows);    
     switch (sidx) 
     { 
      case "nombre": 
       { 
          if(sord == "desc") 
          { 
           resultado = resultado.OrderByDescending(s => s.nombre).Skip(vrows * vpage).Take(vrows).ToList(); 
          } 
          else 
          { 
           resultado = resultado.OrderBy(s => s.nombre).Skip(vrows * vpage).Take(vrows).ToList(); ; 
          } 
        break; 
       } 
      case "user_id": 
       { 
          if(sord == "desc") 
          { 
           resultado = resultado.OrderByDescending(s => s.user_id).Skip(vrows * vpage).Take(vrows).ToList(); 
          } 
          else 
          { 
           resultado = resultado.OrderByDescending(s => s.user_id).Skip(vrows * vpage).Take(vrows).ToList(); 
          } 
        break; 
       } 
     } 
     var retornar = new 
     { 
      total = counter, 
      page = vpage, 
      records = vrows, 
      rows = resultado 
     }; 

     return Json(retornar, JsonRequestBehavior.AllowGet); 

    } 

i mały json przykład:

{"total":101,"page":1,"records":303, 
"rows":[{"user_id":"titito","nombre":"EL bonito, tito "}, 
     {"user_id":"noro","nombre":"ElMoro, Noro "}, 
     {"user_id":"maka","nombre":"Martinez, Macanencio "}]} 

Answer 1

One pojawia się komunikat o błędzie zazwyczaj jeśli nie wliczone wymagany plik językowy grid.locale-XX.js (np grid.locale-en.js) przedjquery.jqGrid.min.js lub jquery.jqGrid.src.js. Zobacz przykład użycia jqGrid w the documentation.

Dodatkowo polecam wam dodać gridview: true i autoencode: true opcję jqGrid, usunąć nieistniejącą myType: 'GET' (istnieją mtype opcja, której wartość domyślna jeśli "GET"), zmniejszyć jsonReader do jsonReader: {repeatitems: false, id: "user_id"}, usuń wszystkie index właściwości z colModel (bo używasz wartości takie same jak wartość właściwości name) i dodaj key: true do definicji kolumny 'user_id'.

Ponieważ nie zaimplementowano stronicowania po stronie serwera, polecam dodać dodatkowo opcję loadonce: true. Pozwala on na natychmiastowe odświeżenie wszystkich danych z od UsuariosGridData, a jqGrid zaimplementuje sortowanie po stronie klienta, stronicowanie lub opcjonalnie filtrowanie/wyszukiwanie danych.

Answer 2

Dodaj odwołanie do jqGrid locale pliku najpierw następuje jqrid

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script> 
<script src="https://cdn.jsdelivr.net/jqgrid/4.6.0/jquery.jqGrid.min.js"></script>