4

我已经为 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");
                }
            } 
        }
        );
    });
4

4 回答 4

3

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

    var url = '/Control/BookstoreInvoicesGridData/?date=' + $(this).val();
    $("#list").jqGrid('setGridParam', { url: url });
    $("#list").trigger("reloadGrid");
于 2012-04-21T08:29:40.867 回答
2

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

$('#buttonsearch').on('click', function () {
    jQuery("#mygrid").jqGrid('setGridParam', { 
        postData: { nit: $("#myparameter").val() }
    }, 
    { page: 1 }).trigger('reloadGrid');            
});
于 2013-06-28T16:19:02.137 回答
2

您没有在代码中包含filterToolbar的调用，但从名称'#gs_Created'我可以假设您使用工具栏搜索

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 中多年未使用的参数（请参见此处）。

于 2012-04-21T11:24:23.637 回答
0

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

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

$("#list").jqGrid({    
....
{ name: 'Created', [...] stype: 'text', searchoptions: { dataInit: datePick, attr: { title: 'Select Date'} } },
....
});
于 2012-04-21T09:12:29.000 回答