jqGrid:将数据发布到服务器以获取行数据(过滤和搜索) [英] jqGrid: POST data to server to fetch row data (filtering and searching)

问题描述

我有这样的表格:

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

和我的jqGrid的表:

and table for my jqGrid:

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

我需要将myForm中的数据发布(而不是GET)到我的服务器方法中，以便获取行数据并填充网格.到目前为止，我还无法获得jqGrid来发布任何东西.我仔细检查了我的数据序列化，它正确地序列化了我的表单数据.这是我的jqGrid代码:

I need to POST (not GET) the data from myForm to 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:

$("#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?

推荐答案

您的主要错误是使用postData参数的形式:

Your main error is the usage of the postData parameter in the form:

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

此用法有两个问题:

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

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 once during the grid initialization time. So you will send always search="" and maxPrice="" to the server.

我建议您将表单替换为具有命名字段的

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>

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

define postData parameter as object with methods:

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

并将onclick事件处理程序添加到搜索"按钮(请参见上面的HTML片段)

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

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

此外，您不写任何有关所使用的服务器技术的信息.可能需要进行一些其他修改才能读取服务器端的参数(例如serializeRowData: function (data) {return JSON.stringify(data);}参见此).我建议您也阅读另一个旧答案:

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 this and this). I recommend you also to read another old answer: How to filter the jqGrid data NOT using the built in search/filter box.

其他一些小错误，例如'/Products/Search") %>'而不是'/Products/Search'或不推荐使用的参数imgpath的使用(请参见

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.

还考虑在网格中使用搜索.例如高级搜索

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});

，以及工具栏搜索:

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

它可能可以代替您使用的搜索表.

it can probably replace the searching form which you use.

这篇关于jqGrid:将数据发布到服务器以获取行数据(过滤和搜索)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！