仅在日期上使用日期选择器过滤 jqGrid 日期时间列

Question

我目前有一个问题，我在网格中有日期时间列，这些列的格式设置为仅显示字段的日期部分。所以原始数据看起来像“2015-04-15T15:31:49.357”，而网格列看起来像“4/15/2015”。

我正在使用 datepicker 来支持列过滤，并且希望能够使用“eq”运算符来使用“equals”进行过滤，但只是在日期部分。目前我没有得到任何匹配，因为时间太长了。

有可能解决这个问题吗？我知道我可以操纵原始数据以去除日期的时间部分，但我更愿意将这些信息保留在原始数据中，因为我也支持导出到 excel 并且可能需要时间。

我目前对该专栏的选择是：

          formatter = "date";
          formatoptions = {srcformat: "Y-m-d", newformat: "n/j/Y"};

我尝试了各种选择，但到目前为止都没有运气。

我也在使用 free-jqgrid fork。

Answer 1

我在免费的 jqGrid 中引入了custom filtering 功能，可以轻松实现青春等场景。 The answer 提供了这种实现的示例。

在您的情况下，例如可以在短名称"deq" 下定义新的Date only "equal"compare 操作，在短名称dne 下定义比较操作Date only "not equal"。 customSortOperations 选项的代码如下：

customSortOperations: {
    deq: {
        operand: "==",
        text: "Date only \"equal\"",
        filter: function (options) {
            var p = this.p, iCol = p.iColByName[options.cmName], cm = p.colModel[iCol],
                newformat = cm.formatoptions != null && cm.formatoptions.newformat ?
                        cm.formatoptions.newformat :
                        $(this).jqGrid("getGridRes", "formatter.date.newformat"),
                srcformat = cm.formatoptions != null && cm.formatoptions.srcformat ?
                        cm.formatoptions.srcformat :
                        $(this).jqGrid("getGridRes", "formatter.date.srcformat"),
                fieldData = $.jgrid.parseDate.call(this, srcformat, options.item[options.cmName]),
                searchValue = $.jgrid.parseDate.call(this, newformat, options.searchValue);
            return fieldData.getFullYear() === searchValue.getFullYear() &&
                fieldData.getMonth() === searchValue.getMonth() &&
                fieldData.getDate() === searchValue.getDate();
        }
    },
    dne: {
        operand: "!=",
        text: "Date only \"not equal\"",
        filter: function (options) {
            var p = this.p, iCol = p.iColByName[options.cmName], cm = p.colModel[iCol],
                newformat = cm.formatoptions != null && cm.formatoptions.newformat ?
                        cm.formatoptions.newformat :
                        $(this).jqGrid("getGridRes", "formatter.date.newformat"),
                srcformat = cm.formatoptions != null && cm.formatoptions.srcformat ?
                        cm.formatoptions.srcformat :
                        $(this).jqGrid("getGridRes", "formatter.date.srcformat"),
                fieldData = $.jgrid.parseDate.call(this, srcformat, options.item[options.cmName]),
                searchValue = $.jgrid.parseDate.call(this, newformat, options.searchValue);
            return fieldData.getFullYear() !== searchValue.getFullYear() ||
                fieldData.getMonth() !== searchValue.getMonth() ||
                fieldData.getDate() !== searchValue.getDate();
        }
    }
}

为了能够使用新的"deq" 和"dne" 操作，您应该在searchoptions 的sopt 中包含日期。

The demo 使用上面的代码。输入数据包含3个日期："2015-04-15T15:31:49.357"、"2015-04-15T21:15:40.123"、"2015-04-15"：

var mydata = [
        { id: "10",  invdate: "2015-04-15T15:31:49.357", name: "test1",... },
        { id: "20",  invdate: "2015-04-15T21:15:40.123", name: "test2",... },
        { id: "30",  invdate: "2015-04-15", name: "test3", ...},
        ...
    ]

15-Apr-2015 的过滤显示所有三行：

Another demo 使用几乎相同的代码，但以完整的日期/时间格式显示日期。尽管如此，过滤工作。请注意，我在演示中使用了来自 GitHub 的最新免费 jqGrid 源。确实需要它，因为我在parseDate 的代码中做了一些small changes 来使演示工作。

Answer 2

来自 OlegKi 在 github 上的回复：https://github.com/free-jqgrid/jqGrid/issues/50

我在免费的 jqGrid 中引入了自定义过滤功能，以便轻松实现青春等场景。答案提供了这种实现的示例。

在您的情况下，例如，可以在短名称“deq”下定义仅新日期“等于”比较操作，而在短名称 dne 下仅定义“不等于”比较操作日期。 customSortOperations 选项的代码如下：

customSortOperations: {
deq: {
    operand: "==",
    text: "Date only \"equal\"",
    filter: function (options) {
        var p = this.p, iCol = p.iColByName[options.cmName], cm = p.colModel[iCol],
            newformat = cm.formatoptions != null && cm.formatoptions.newformat ?
                    cm.formatoptions.newformat :
                    $(this).jqGrid("getGridRes", "formatter.date.newformat"),
            srcformat = cm.formatoptions != null && cm.formatoptions.srcformat ?
                    cm.formatoptions.srcformat :
                    $(this).jqGrid("getGridRes", "formatter.date.srcformat"),
            fieldData = $.jgrid.parseDate.call(this, srcformat, options.item[options.cmName]),
            searchValue = $.jgrid.parseDate.call(this, newformat, options.searchValue);
        return fieldData.getFullYear() === searchValue.getFullYear() &&
            fieldData.getMonth() === searchValue.getMonth() &&
            fieldData.getDate() === searchValue.getDate();
    }
},
dne: {
    operand: "!=",
    text: "Date only \"not equal\"",
    filter: function (options) {
        var p = this.p, iCol = p.iColByName[options.cmName], cm = p.colModel[iCol],
            newformat = cm.formatoptions != null && cm.formatoptions.newformat ?
                    cm.formatoptions.newformat :
                    $(this).jqGrid("getGridRes", "formatter.date.newformat"),
            srcformat = cm.formatoptions != null && cm.formatoptions.srcformat ?
                    cm.formatoptions.srcformat :
                    $(this).jqGrid("getGridRes", "formatter.date.srcformat"),
            fieldData = $.jgrid.parseDate.call(this, srcformat, options.item[options.cmName]),
            searchValue = $.jgrid.parseDate.call(this, newformat, options.searchValue);
        return fieldData.getFullYear() !== searchValue.getFullYear() ||
            fieldData.getMonth() !== searchValue.getMonth() ||
            fieldData.getDate() !== searchValue.getDate();
    }
}

} 为了能够使用新的“deq”和“dne”操作，您应该在带有日期的列的搜索选项中包含其中。

演示使用上述代码。输入数据包含 3 个日期：“2015-04-15T15:31:49.357”、“2015-04-15T21:15:40.123”、“2015-04-15”。 2015 年 4 月 15 日之前的过滤显示所有三行。

另一个演示使用几乎相同的代码，但以完整的日期/时间格式显示日期。尽管如此，过滤仍然有效。请注意，我在演示中使用了来自 GitHub 的最新免费 jqGrid 源。确实需要它，因为我对 parseDate 的代码进行了一些小改动以使演示正常运行。