如何使用搜索输入值重新加载 jQGrid答案

【问题标题】：How to reload jQGrid with the search input values如何使用搜索输入值重新加载 jQGrid
【发布时间】：2012-04-21 08:26:34
【问题描述】：

我已经为 jqGrid 的列之一绑定了 DatePicker 插件。我要做的就是在选择日期后刷新整个网格。下面的代码重新加载了网格，但它发出了一个简单的 GET 请求，没有任何搜索参数。如何解决？

    $(function () {
        $("#list").jqGrid({
            url: '/Control/BookstoreInvoicesGridData/',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['Invoice #', 'Created', 'Customer ID', 'Total Amount', 'PaymentType'],
            colModel: [
      { name: 'OrderID', index: 'OrderID', width: 20, align: 'center', sortable: true, search: true },
      { name: 'Created', index: 'Created', width: 40, align: 'center', sortable: true, search: true },
      { name: 'CustomerName', index: 'CustomerName', width: 60, align: 'center', sortable: true, search: true },
      { name: 'TotalAmount', index: 'TotalAmount', width: 40, align: 'center', sortable: true, search: false },
      { name: 'PaymentType', index: 'PaymentType', width: 40, align: 'center', sortable: true, search: false}],
            pager: jQuery('#pager'),
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'OrderID',
            sortorder: "desc",
            viewrecords: true,
            imgpath: '/scripts/themes/coffee/images',
            width: '800'
        });

        $('#gs_Created').datepicker({
            onSelect: function (dateText, inst) {
                var e = $("#list").data("events");
                if (typeof (e) !== "undefined" && typeof (e.reloadGrid) !== "undefined") {
                    $("#list").trigger("reloadGrid");
                }
            } 
        }
        );
    });

【问题讨论】：

标签： jquery jqgrid datepicker

【解决方案1】：

您可以更改 jqGrid 的 URL 以发送您当前的参数：

    var url = '/Control/BookstoreInvoicesGridData/?date=' + $(this).val();
    $("#list").jqGrid('setGridParam', { url: url });
    $("#list").trigger("reloadGrid");

【讨论】：

好的，但在这种情况下，一旦选择的日期将始终在 URL 中，即使我清除了日期输入值
不，如果您每次选择新日期时都更改 URL，那么它将发送正确的值。我的意思是你应该把我写的代码放在date-picker.onselect处理程序中。

【解决方案2】：

您的代码中没有包含filterToolbar 的调用，但从名称'#gs_Created' 我可以假设您使用toolbar searching

var grid = $("#list"),
    datePick = function (elem) {
        $(elem).datepicker({
            changeYear: true,
            changeMonth: true,
            showButtonPanel: true,
            onSelect: function () {
                if (this.id.substr(0, 3) === "gs_") {
                    // call triggerToolbar only in case of searching toolbar
                    setTimeout(function () {
                        grid[0].triggerToolbar();
                    }, 100);
                }
            }
        });
    });

grid.jqGrid({
    url: '/Control/BookstoreInvoicesGridData/',
    ...
    // sortable: true, search: true are already default 
    // you can change other default values using cmTemplate
    cmTemplate: {align: 'center', width: 40},
    colModel: [
        { name: 'OrderID', index: 'OrderID', width: 20 },
        { name: 'Created', index: 'Created',
            searchoptions: { dataInit: datePick, attr: { title: 'Select Date'} } },
        { name: 'CustomerName', index: 'CustomerName', width: 60 },
        { name: 'TotalAmount', index: 'TotalAmount' },
        { name: 'PaymentType', index: 'PaymentType'}
    ],
    pager: '#pager',
    gridview: true,
    height: 'auto',
    ...
});

请删除imgpath: '/scripts/themes/coffee/images'参数，该参数在jqGrid中多年未使用（参见here）。

【讨论】：

【解决方案3】：

谢谢，对我来说，它可以通过参数为网格数据充电：

$('#buttonsearch').on('click', function () {
    jQuery("#mygrid").jqGrid('setGridParam', { 
        postData: { nit: $("#myparameter").val() }
    }, 
    { page: 1 }).trigger('reloadGrid');            
});

【讨论】：

【解决方案4】：

这是解决方案，如果其他人都会遇到同样的问题。

datePick = function (elem) {
            jQuery(elem).datepicker();
        }

$("#list").jqGrid({    
....
{ name: 'Created', [...] stype: 'text', searchoptions: { dataInit: datePick, attr: { title: 'Select Date'} } },
....
});

【讨论】：