jqgrid setGridParam тип данных: локальный - PullRequest
8 голосов
/ 03 июля 2010

Я не хочу подключаться к серверу и возвращать каждую строку, когда я пролистываю записи с помощью пейджера. Я прочитал, что если я установлю datatype = local в полном блоге в функции .ajax И если я установлю loadonce: true, тогда я смогу избежать ожидания перезагрузки таблицы с данными.

Однако, когда я делаю эти вещи, сетка не переходит на следующую страницу. Просто висит ...
Что я делаю не так?

jQuery(document).ready(function () {
    jQuery("#list").jqGrid({
        datatype: processrequest,
        mtype: 'POST',  
        jsonReader: {  
            root: "rows", //arry containing actual data  
            page: "page", //current page  
            total: "total", //total pages for the query  
            records: "records", //total number of records  
            repeatitems: false,  
            id: "ID" //index of the column with the PK in it   
        },
        colNames: ['Name', 'Title'],
        colModel: [
      { name: 'name', index: 'name', width: 250 },
      { name: 'title', index: 'title', width: 250 }
      ],
        pager: '#pager',
        rowNum: 10,
        rowList: [10, 20, 30],
        sortorder: "desc",
        viewrecords: true,
        height: '250px',
        caption: 'My first grid',
        loadonce: true
    }).navGrid('#pager', {edit: false, add: false, del: false});
});

function processrequest(postdata) {
...
$.ajax({
...
    complete: function (jsondata, stat) {
        if (stat == "success") {
            var thegrid = jQuery("#list2")[0];
            var jsonObject = (eval("(" + jsondata.responseText + ")"));
            thegrid.addJSONData(jsonObject.d);
            $(".loading").hide();
        } else {
            $(".loading").hide();
            alert("Error with AJAX callback");
        }
        $("#list").setGridParam({ datatype: 'local' });
    }
});
}

Ответы [ 3 ]

17 голосов
/ 03 июля 2010

Есть некоторые недоразумения. Если вы используете datatype: local, то вам нужно заполнить jqGrid такими методами, как addRowData, или один раз задать данные с параметром data (для jqGrid версии 3.7 и выше). Таким образом, использование datatype: local следует для jqGrid, не загружая никаких данных, и ваш параметр datatype: processrequest будет игнорироваться.

Если вы хотите использовать параметр loadonce: true, который поддерживается начиная с версии 3.7 jqGrid, у вас должны быть все параметры jqGrid для JSON или XML (например, datatype: json в вашем случае) и дополнительный параметр loadonce: true. Затем после первой загрузки данных jqGrid переключит тип данных на datatype: local, после чего он будет работать независимо от сервера, но игнорирует некоторые параметры (например, datatype: processrequest в вашем случае).

Еще одно маленькое замечание. Большинство свойств jsonReader, которые вы используете в своем примере, являются настройками по умолчанию (см. this wiki ). Используемые вами параметры будут объединены со свойствами по умолчанию, поэтому достаточно использовать такой параметр, как jsonReader: { repeatitems: false, id: "ID"}

ОБНОВЛЕНО : ОК, Джефф. Мне кажется, что для решения вашей проблемы вам нужно еще несколько примеров кода с обеих сторон: клиент и сервер. Вот небольшой пример, который я создал и протестировал для вас.

Прежде всего, на стороне сервера. В веб-сервисе ASMX мы определяем веб-метод, который генерирует тестовые данные для вашей таблицы:

public JqGridData TestMethod() {
    int count = 200;
    List<TableRow> gridRows = new List<TableRow> (count);
    for (int i = 0; i < count; i++) {
        gridRows.Add (new TableRow () {
            id = i,
            cell = new List<string> (2) {
                string.Format("Name{0}", i), 
                string.Format("Title{0}", i)
            }
        });
    }

    return new JqGridData() {
        total = 1,
        page = 1,
        records = gridRows.Count,
        rows = gridRows
    };
}

где классы JqGridData и TableRow определены следующим образом:

public class TableRow {
    public int id { get; set; }
    public List<string> cell { get; set; }
}
public class JqGridData {
    public int total { get; set; }
    public int page { get; set; }
    public int records { get; set; }
    public List<TableRow> rows { get; set; }
}

Здесь вы видите, что веб-метод TestMethod не имеет параметров и отправляет полные данные обратно. Пейджинг, сортировка и поиск данных будут выполняться с помощью jqGrid (версия 3.7 или выше).

Чтобы прочитать такие данные и поместить в jqGrid, мы можем сделать следующее:

$("#list").jqGrid({
    url: './MyTestWS.asmx/TestMethod',
    datatype: 'json',
    mtype: 'POST',
    loadonce: true,
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
    serializeGridData: function (postData) {
        return JSON.stringify(postData);
    },
    jsonReader: {
        root: function (obj) { return obj.d.rows; },
        page: function (obj) { return obj.d.page; },
        total: function (obj) { return obj.d.total; },
        records: function (obj) { return obj.d.records; }
    },
    colModel: [
        { name: 'name', label: 'Name', width: 250 },
        { name: 'title', label: 'Title', width: 250 }
    ],
    rowNum: 10,
    rowList: [10, 20, 300],
    sortname: 'name',
    sortorder: "asc",
    pager: "#pager",
    viewrecords: true,
    gridview: true,
    rownumbers: true,
    height: 250,
    caption: 'My first grid'
}).jqGrid('navGrid', '#pager', {edit: false, add: false, del: false, search: true},
    {},{},{},{multipleSearch : true});

Некоторые комментарии по поводу определения jqGrid:

Для связи с веб-службой ASMX через JSON необходимо выполнить следующее в соответствующем запросе jQuery.ajax:

  • dataType: 'json' должен быть установлен.
  • contentType:'application/json; charset=utf-8' должен быть установлен.
  • данные, отправляемые на сервер, должны быть в кодировке JSON.

Чтобы сделать все это, я использую datatype, ajaxGridOptions и serializeGridData параметры jqGrid. Я выполняю кодировку JSON с функцией JSON.stringify (соответствующий JavaScript можно скачать с здесь ).

Затем полученные данные должны быть декодированы. Я делаю это с моей любимой функцией jqGrid - jsonReader с функциями (см. этот пост и эту вики ).

В конце мы используем loadonce: true, который изменяет datatype jqGrid с 'json' на 'local', и мы можем сразу использовать все преимущества локальной подкачки, сортировки и расширенного поиска, существующие с jqGrid версии 3.7.

Если вы хотите сделать пейджинг, сортировку и поиск на стороне сервера (или расширенный поиск) с помощью веб-службы ASMX, это также возможно. Чтобы сэкономить здесь немного места и разделить примеры кода, я опубликую соответствующий пример в другом вашем вопросе jqgrid Страница 1 из x pager (см. ОБНОВЛЕННАЯ часть).

2 голосов
/ 17 августа 2010

Уже немного поздно, но вот (?) Супер-простое решение для любых будущих искателей решений:

gridComplete: function(){ 
  $("#yourGridID").setGridParam({datatype: 'local'}); 
}

Вот и все. Я использую 3.7.2, не могу говорить ни за какие другие версии. Проблема (по-видимому) проистекает из 'loadonce', работающего только с предопределенными значениями типа данных, а не функцией. Я верю и другие встроенные значения также будут работать, но «локальный» имеет смысл.

0 голосов
/ 23 июля 2010

Это сработало для меня.У меня была проблема с поиском и сортировкой не работает.Вероятно, из-за элементов .d и __type, которые были отправлены обратно в объект JSON в .net.Однако с дополнительными настройками в этом примере.Это сработало!

Я сходил с ума.Это способ настройки сетки, если вы используете .Net в качестве веб-службы.Он настроен для анализа и правильной установки элементов данных из объекта JSON в правильные местоположения, необходимые в Grid, чтобы обеспечить работу подкачки и сортировки.

Мне пришлось комментировать, потому что я уверенЕсть несколько человек, которые хотели бы использовать эту Grid, но используют .Net в качестве своего веб-сервиса.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...