jquery - jqGrid:将数据POST到服务器以获取行数据(过滤和搜索)

Question

我有一个这样的表格:

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

和我的 jqGrid 表格:

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

我需要将数据从 myForm 发布(而不是获取)到我的服务器方法，以便获取行数据并填充网格。到目前为止，我还无法让 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"
    }
});

你能看出我做错了什么或者应该采取不同的做法吗？

Answer 1

您的主要错误是在表单中使用 postData 参数:

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

这种用法有两个问题:

1. 值 $("#myForm").serialize() 会覆盖 POST 请求的所有参数，而不是添加其他参数。
2. 值$("#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 和 this )。我建议您还阅读另一个旧答案:How to filter the jqGrid data NOT using the built in search/filter box。

其他一些小错误，例如 '/Products/Search") %>' 而不是 '/Products/Search' 或使用已弃用的参数 imgpath (请参阅 documentation ) 不太重要。像 align: 'left' 这样的默认列选项应该最好删除。

还可以考虑在网格中使用搜索。例如advance searching

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

还有 toolbar searching :

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

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