Question

我为其中一个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");
                }
            } 
        }
        );
    });

Answer 1

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

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

Answer 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）。

Answer 3

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

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

Answer 4

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

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

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

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

4 个答案: