JqGrid: данные POST для сервера для извлечения данных строки (фильтрация и поиск)

У меня есть такая форма:

<form id='myForm'>
<input type='text' name='search' />
<input type='text' name='maxPrice' />
</form>

и таблица для моего jqGrid:

<table id='myGrid'></table>

Мне нужно отправить POST (не GET) данные из myForm на мой серверный метод, чтобы получить данные строки и заполнить сетку. До сих пор мне не удалось получить jqGrid для POST. Я дважды проверил сериализацию данных и правильно сериализую свои данные формы. Вот мой код jqGrid:

$("#myGrid").jqGrid({
    url: '/Products/Search") %>',
    postData: $("#myForm").serialize(),
    datatype: "json",
    mtype: 'POST',
    colNames: ['Product Name', 'Price', 'Weight'],
    colModel: [
        { name: 'ProductName', index: 'ProductName', width: 100, align: 'left' },
        { name: 'Price', index: 'Price', width: 50, align: 'left' },
        { name: 'Weight', index: 'Weight', width: 50, align: 'left' }
    ],
    rowNum: 20,
    rowList: [10, 20, 30],
    imgpath: gridimgpath,
    height: 'auto',
    width: '700',
    //pager: $('#pager'),
    sortname: 'ProductName',
    viewrecords: true,
    sortorder: "desc",
    caption: "Products",
    ajaxGridOptions: { contentType: "application/json" },
    headertitles: true,
    sortable: true,
    jsonReader: {
        repeatitems: false,
        root: function(obj) { return obj.Items; },
        page: function(obj) { return obj.CurrentPage; },
        total: function(obj) { return obj.TotalPages; },
        records: function(obj) { return obj.ItemCount; },
        id: "ProductId"
    }
});

Вы видите, что я делаю неправильно или должны делать по-другому?

Ответы

Ответ 1

Ваша основная ошибка заключается в использовании параметра postData в форме:

postData: $("#myForm").serialize()

Это использование имеет две проблемы:

  • Значение $("#myForm").serialize() перезаписывает все параметры запросов POST вместо добавления дополнительных параметров.
  • Значение $("#myForm").serialize() будет вычисляться только один раз во время инициализации сетки. Поэтому вы всегда будете отправлять сообщения search="" и maxPrice="" на сервер.

Я предлагаю вам заменить форму именованными полями редактирования на

<fieldset>
<input type='text' id='search' />
<input type='text' id='maxPrice' />
<button type='button' id='startSearch'>Search</button>
</fieldset>

определить postData параметр как объект с помощью методов:

postData: {
    search: function() { return $("#search").val(); },
    maxPrice: function() { return $("#maxPrice").val(); },
},

и добавьте обработчик события onclick к кнопке "Поиск" (см. выше фрагмент HTML)

$("#startSearch").click(function() {
    $("#myGrid").trigger("reloadGrid");
});

Кроме того, вы ничего не пишете о технологии сервера, которую вы используете. Возможно, потребуется дополнительная модификация, чтобы читать параметры на стороне сервера (например, serializeRowData: function (data) {return JSON.stringify(data);} см. this и это). Я рекомендую вам также прочитать еще один старый ответ: Как фильтровать данные jqGrid NOT, используя встроенный блок поиска/фильтра.

Некоторые другие небольшие ошибки, такие как '/Products/Search") %>' вместо "/Products/Search" или использование устаревшего параметра imgpath (см. documentation) менее важны. Параметры столбца по умолчанию, такие как align: 'left', должны быть удалены лучше.

Рассмотрим также использование поиска в сетке. Например предварительный поиск

$("#myGrid").jqGrid('navGrid','#pager',
                    {add:false,edit:false,del:false,search:true,refresh:true},
                    {},{},{},{multipleSearch:true});

а также поиск панели инструментов:

$("#myGrid").jqGrid('filterToolbar',
                    {stringResult:true,searchOnEnter:true,defaultSearch:"cn"});

он может, вероятно, заменить форму поиска, которую вы используете.