jQuery jqGrid：POST 数据到服务器以获取行数据（过滤和搜索）

jqGrid: POST data to server to fetch row data (filtering and searching)

提问by Byron Sommardahl

I have a form like this:

我有一个这样的表格：

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

and table for my jqGrid:

和我的 jqGrid 表格：

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

I need to POST (not GET) the data from myFormto my server method in order to fetch the row data and populate the grid. So far, I've not been able to get jqGrid to POST anything. I double-checked my data serialization and it is serializing my form data properly. Here is my jqGrid code:

我需要将数据从myForm我的服务器方法POST（而不是 GET）以获取行数据并填充网格。到目前为止，我还无法让 jqGrid 发布任何内容。我仔细检查了我的数据序列化，它正确地序列化了我的表单数据。这是我的 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"
    }
});

Can you see what I'm doing wrong or should be doing differently?

你能看出我做错了什么还是应该做不同的事情？

回答by Oleg

Your main error is the usage of the postDataparameter in the form:

您的主要错误是使用postData以下形式的参数：

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

This usage has two problems:

这种用法有两个问题：

1. The value $("#myForm").serialize()overwrite all parameters of the POST requests instead of the adding additional parameters.
2. The value $("#myForm").serialize()will be calculated only onceduring the grid initialization time. So you will send always search=""and maxPrice=""to the server.

1. 该值会$("#myForm").serialize()覆盖 POST 请求的所有参数，而不是添加其他参数。
2. 该值$("#myForm").serialize()将在网格初始化期间仅计算一次。所以，你总是会发送search=""和maxPrice=""服务器。

I suggest you to to replace the form with named edit fields to

我建议你用命名的编辑字段替换表单

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

define postDataparameter as object with methods:

postData使用方法将参数定义为对象：

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

and add onclickevent handler to the "Search" button (see above HTML fragment)

并将onclick事件处理程序添加到“搜索”按钮（见上面的 HTML 片段）

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

Moreover you write nothing about the server technology which you use. It can be some additional modification is required to be able to read parameters on the server side (for example serializeRowData: function (data) {return JSON.stringify(data);}see thisand this). I recommend you also to read another old answer: How to filter the jqGrid data NOT using the built in search/filter box.

此外，您没有写任何关于您使用的服务器技术的信息。可能需要进行一些额外的修改才能在服务器端读取参数（例如serializeRowData: function (data) {return JSON.stringify(data);}参见this和this）。我建议您还阅读另一个旧答案：How to filter the jqGrid data NOT using the built in search/filter box。

Some other small errors like '/Products/Search") %>'instead of '/Products/Search' or the usage of deprecated parameter imgpath(see documentation) are less important. The default column options like align: 'left'should be better removed.

其他一些小错误，例如'/Products/Search") %>'代替 '/Products/Search' 或使用不推荐使用的参数imgpath（请参阅文档）不太重要。align: 'left'应该更好地删除默认的列选项。

Consider also to use searching in the grid. For example advance searching

还考虑在网格中使用搜索。例如提前搜索

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

and also toolbar searching:

以及工具栏搜索：

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

it can probably replace the searching form which you use.

它可能会取代您使用的搜索表单。