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(); }
                                            })
                                        }
                                    }
                                }

我记得没错，我在 Whosebug 上看到 Oleg 的回答（抱歉，丢失了 link），谈到旧版本中的日期时间解析问题。是我的日期格式问题吗？

由于其他搜索工具栏都很好用，我认为这不是分页器或网格本身的问题。谁能帮我看看日期选择器哪里设置错了？？

谢谢！ :)

我不确定是否需要这个 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>。 free jqGrid会自动创建对应的div。您可以跳过方法navGrid、inlineNav 等方法中的寻呼机选项。在这种情况下，navGrid 的调用可能类似于 $('#list').jqGrid('navGrid', {edit: false,..});。
您可以在 jqGrid 的 searching 参数中指定 default 搜索选项，例如 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 数据时显示错误。错误将显示在列 headers 和网格 body 之间的 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.

您可以考虑额外使用免费 jqGrid 的 multiPageSelection: true 和 forceClientSorting: true 选项。

选项forceClientSorting: true强制本地排序和过滤来自服务器return的数据之前将显示第一页。如果您使用 sortname: 'LockedDate'，则 服务器必须 按 LockedDate 对 return 编辑的数据进行排序。如果您使用选项 forceClientSorting: true，那么服务器可以 return 未排序的数据并在显示第一页之前免费 jqGrid 对数据 localy 排序。

选项multiPageSelection: true在the answer. The demo中描述了演示结果。该选项允许 1) 在页面上保持 selection（可以在一页上 select 行，更改页面，在另一页上 select 行，返回到第一页，然后之前 selected 行将保留）2) 一个可以 pre-select 行。

jqgrid searchToolbar datepicker 不过滤

jqgrid searchToolbar datepicker not filtering

jquery

jquery-ui

datepicker

jqgrid

free-jqgrid