jqgrid searchToolbar datepicker没有过滤

Question

我现在正在使用 jqGrid（版本：jqGrid 4.14.1-pre，免费 jqGrid），并且想要一个带有日期选择器的搜索工具栏。 当我单击文本框时，日期选择器成功弹出，并使用我选择的日期更新文本框。但是，它不会过滤数据。

我真正想要的是 sopt:["le"] 但失败了。出于检查目的，我也尝试了“eq”。但在这两种情况下，所有数据行都会消失。

我确实设置了

loadonce:true

尝试过

$('#list')[0].triggerToolbar();

由于我确实使用了旧版本的 jqGrid，所以我在 GitHub 中更新了最新版本并尝试了但仍然失败。

{label: 'LockedDate',   name: 'LockedDate',     index: 'LockedDate',    sorttype: 'date',   clearSearch: true,
        sortable: true,
        resizable: false,
        hidden: false,
        search: true,
        formatter: 'date', 
        formatoptions: {srcformat: 'm/d/Y h:i:s A', newformat: 'm/d/Y h:i:s A'},
        searchrules: {date: true},
        searchoptions: {
             sopt: ["le"],
            dataInit: function (element) {
                            $(element).datepicker({
                                    dateFormat: 'mm/dd/yy',
                                    changeYear: true,
                                    changeMonth: true,
                                    showButtonPanel: true,
                                    onSelect: function () {
                                        $(this).keydown();
                                        $('#list')[0].triggerToolbar();
                                                },
                                    onChange: function () { 
                                             $('#list')[0].triggerToolbar(); }
                                            })
                                        }
                                    }
                                }

我没记错，我看到 Oleg 在 stackoverflow 上的回答（抱歉，链接丢失）谈论旧版本中的日期时间解析问题。是我的日期格式的原因吗？

由于其他搜索工具栏运行良好，我认为这不是寻呼机或网格本身的问题。谁能帮我把日期选择器设置错了？

谢谢！ :)

我不确定是否需要这个 jqGrid 代码，但以防万一我会放：

$('#list').jqGrid({
    url: '/LockedObjects/GetLockedObjects',
    datatype: "json",
    contentType: "application/json; charset-utf-8",
    mtype: 'GET',

    colModel: [
        {label: 'LockedBy', name: 'LockedBy',index: 'LockedBy', sorttype: 'text',   clearSearch: true,},
        {
            label: 'LockedDate', name: 'LockedDate', index: 'LockedDate', sorttype:'date', clearSearch: true,
                sortable: true,
                resizable: false,
                hidden: false,
                search: true,
                formatter: 'date', 
                formatoptions: {srcformat: 'm/d/Y h:i:s A', newformat: 'm/d/Y h:i:s A'},
                searchrules: {date: true},
                searchoptions: {sopt: ["le"],
                                dataInit: function (element) {
                                        $(element).datepicker({
                                            dateFormat: 'mm/dd/yy',
                                            changeYear: true,
                                            changeMonth: true,
                                            showButtonPanel: true,
                                            onSelect: function () {
                                                $(this).keydown();
                                                $('#list')[0].triggerToolbar();
                                                },
                                            onChange: function () { $('#tbLockedPartiesHistory')[0].triggerToolbar(); }
                                            })
                                        }
                                }
                }],
    rowNum: 20,
    rowList: [20, 30, 50],
    sortName: 'LockedDate',
    ignoreCase: true,
    viewrecords: true,
    sortOrder: 'asc',
    loadonce: true,
    multiselect: true,
    jsonReader: {
        repeatitems: false,
        root: 'rows',
        page: 'page',
        total: 'total'
    },
    height: 'auto',
    pager: '#listPager',
    loadError: function (xhr, status, error) {
        console.log(xhr);
        console.log(status);
        console.log(error);
    }
});

$('#list').jqGrid('filterToolbar', {searchOnEnter: false, ignoreCase: true, searchOperators:true,defaultSearch: 'cn' });
$('#list').jqGrid('navGrid', '#listPager', {edit: false,
                                            add: false,
                                            del: false,
                                            refresh: true
                                            });
};

Answer 1

以下searchoptions 应该可以工作：

searchoptions: {
    sopt: ["le"], // or any other search operation
    dataInit: function (element) {
        var self = this; // save the reference to the grid
        $(element).datepicker({
            dateFormat: 'mm/dd/yy',
            changeYear: true,
            changeMonth: true,
            showButtonPanel: true,
            onSelect: function () {
                setTimeout(function () {
                    self.triggerToolbar();
                }, 0);
            }
        });
    }
}

我建议您对代码进行一些额外的更改以简化它或修复一些选项：

• jqGrid 中没有contentType 选项。要设置底层jQuery.ajax 函数的contentType 参数，应使用ajaxGridOptions: { contentType: "application/json; charset-utf-8" }
• 最好去掉mtype: 'GET'、ignoreCase: true、height: 'auto'等选项，这些选项有默认值免费jqGrid。
• 应该删除选项sortOrder: 'asc'。不存在sortOrder 选项（只有sortorder 选项，默认值为'asc'）。同样，选项sortName: 'LockedDate' 是错误的，它将被忽略。正确的选项是sortname: 'LockedDate'。
• 您应该将jsonReader: {repeatitems: false, root: 'rows', page: 'page', total: 'total' } 替换为jsonReader: { repeatitems: false }。 jsonReader 的 root, page, total 的所有其他属性都有默认值，因此可以跳过。在大多数情况下，甚至可以跳过 jsonReader: { repeatitems: false }，因为免费的 jqGrid 会尝试检测 repeatitems。
• 建议使用pager: true 而不是pager: '#listPager'。您可以从 HTML 页面中删除不需要的 <div id="listPager"></div>。免费的jqGrid会自动创建相应的div。您可以跳过方法navGrid、inlineNav 等方法中的寻呼机选项。在这种情况下，navGrid 的调用可能类似于 $('#list').jqGrid('navGrid', {edit: false,..});。
• 您可以在jqGrid 的searching 参数中指定默认 搜索选项，如searchOnEnter: false, ignoreCase: true, searchOperators:true, defaultSearch: 'cn'。它简化了filterToolbar 或搜索对话框的后续使用。例如，您可以使用 jqGrid 选项searching: { searchOperators: true, defaultSearch: 'cn', closeOnEscape: true, searchOnEnter: true, multipleSearch: true, multipleGroup: true}。
• 建议移除loadError回调。免费 jqGrid 有 default 回调，它会在从服务器加载 jqGrid 数据时显示错误。错误将显示在列标题和网格主体之间的 div 中（请参阅the picture）。通过指定 loadError 回调将显示更少的信息，因为免费 jqGrid 显示默认值。
• 您应该清理colModel 项目。列LockedBy：{label: 'LockedBy', name: 'LockedBy',index: 'LockedBy', sorttype: 'text', clearSearch: true,}的定义应替换为{ name: 'LockedBy', searchoptions: { clearSearch: true } }。应删除列LockedDate 的属性label, index, sortable, hidden, search，并将属性clearSearch: true 移到searchoptions 内。

你可以考虑另外使用free jqGrid的multiPageSelection: true和forceClientSorting: true选项。

选项forceClientSorting: true 强制本地对从服务器返回的数据在第一页之前进行排序和过滤。如果您使用sortname: 'LockedDate'，那么服务器必须按LockedDate 对返回的数据进行排序。如果您使用选项forceClientSorting: true，那么服务器可以返回未排序的数据并释放 jqGrid 在显示第一页之前对数据进行 localy 排序。

multiPageSelection: true 选项在the answer 中描述。 The demo 展示了结果。该选项允许 1) 保持对页面的选择（可以选择一页上的行，更改页面，选择另一页上的行，返回第一页，之前选择的行将被保留）2) ​​一个可以 预选行。