JQGrid - сетка показывает, но данные не загружаются

Question

Пожалуйста, помогите. У меня есть поиск старых вопросов, но я не могу найти соответствующее решение.

Нажмите на кнопку, которую показывает сетка, но данные не загружаются.

моего веб réponse:

{"d":"{"totalpages":2,"currpage":1,"totalrecords":15,"rows":[{"id":"110","cell":["110","perform action 1"]},{"id":"112","cell":["112","perform action 2"]},...]}"} 

мой код JQuery:

$("#b4").click(function() {doAjax4();}); 

    function doAjax4() { 
     $.ajax({ 
      async: false, cache: false, 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      url: "WebAction.aspx/GetDataTable", 
      data: "{}", 
      datatype: "json", 
      success: function (data) { 
       $("#mygrid1").jqGrid({ 
        dataType: "json", 
        type: "POST", 
        colNames: ['runid', 'action'], 
        colModel: [{ name: 'runid', index: 'runid' }, { name: 'action', index: 'action' }], 
        jsonReader: { 
         root: "rows", 
         page: "currpage", 
         total: "totalpages", 
         records: "totalrecords", 
         id: "id", 
         cell: "cell", 
         repeatitems: true 
        }, 
        loadonce: true, 
        viewrecords: true, 
        gridview: true, 
        rowList: [5, 10, 50], 
        caption: "Action Table", 
        height: 'auto', 
        //pager: '#pager', 
        emptyrecords: 'No data for the applied filter' 
       }); 
      }, 
      error: function (xhr, type, exception) { 
       alert(xhr.statusText); 
      } 
     }) 
    } 

Answer 1

Я вижу много проблем в вашем коде:

• Тип значения в d собственности ответ сервера строка. Поэтому я полагаю, что вы сделали типичную ошибку начинающего в веб-службе GetDataTable: вы включили ненужное преобразование в JSON прямо в свой код. Правильно было бы вернуть объект от GetDataTable вместо строки .
• вы используете параметр datatype: "json" в $.ajax, но вместо этого вы должны использовать dataType: "json". Название опции close в jqGrid - datatype, но имя в $.ajax - dataType.
• Вы используете ненужный параметр async: false, который я бы рекомендовал удалить.
• вы вызываете doAjax4 внутри сверху click обработчик. Функция doAjax4 создает сетку внутри обработчика success путем выполнения кода $("#mygrid1").jqGrid({ ...}); . It's important to understand, that jqGrid convert initial empty table () to relatively complex structure of divs and tables. Thus **you can't create the same grid more as once**. The second coll will be just ignored. To fix the problem you should include the test whether the grid is already created of not and use $ ("# mygrid1"). Trigger ("reloadGrid"); instead of $ ("# mygrid1"). JqGrid ({...});. Еще один способ устранить проблему будет включать в себя вызов метода GridUnloadдо$("#mygrid1").jqGrid({ ...}); `. Он уничтожит существующую сетку, если она существует.
• Параметры jqGrid содержат параметр dataType: "json" вместо datatype: "json", поэтому jqGrid использует опцию по умолчанию datatype: "xml", что, вероятно, не то, что вы хотите. Точно так же вы используете неизвестный вариант type: "POST", который существует в $.ajax, но который не существует в jqGrid. Вы должны исправить имя опции от type до mtype. Если вы хотите, чтобы jqGrid выполнил запрос HTTP POST, вам следует указать параметр url (например, url: "WebAction.aspx/GetDataTable")
• data, возвращенный в первом вызове Ajax, будет просто проигнорирован. Если вы хотите, чтобы jqGrid использовал data, который вы загрузили до этого, вы должны использовать, например, datatype: "jsonstring", datastr: data.d. Это соответствует вашему текущему формату данных.