Question

我目前遇到的问题是网格中的日期时间列格式化为仅显示字段的日期部分。所以原始数据看起来像“2015-04-15T15：31：49.357”，网格栏看起来像“2015年4月15日”。

我正在使用一个日期选择器来支持列过滤，并希望能够使用“eq”运算符来过滤使用“equals”，但只是在日期部分。目前我没有得到任何比赛，因为时间已经过去了。

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

我目前对该列的选项是：

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

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

我也在使用free-jqgrid fork。

Answer 1

我在免费的jqGrid中引入了custom filtering功能，以便轻松实现青少年等场景。 The answer提供了此类实施的示例。

在您的情况下，可以在短名称Date only "equal"下定义新的"deq"比较操作，并在短名称Date only "not equal"下定义比较操作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"操作，您应该在列的sopt searchoptions中包含日期。

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过滤显示所有三行：

enter image description here

Another demo使用几乎相同的代码，但以完整日期/时间格式显示日期。然而，过滤工作。小心点，我在演示中使用GitHub的最新免费jqGrid源代码。它确实需要，因为我在parseDate的代码中制作了一些small changes来使演示工作。

enter image description here

Answer 2

OlegKi对github的回应：https://github.com/free-jqgrid/jqGrid/issues/50

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

在您的情况下，只能定义新的日期\＆＃34;等于\＆＃34;比较短名称下的操作＆＃34; deq＆＃34;例如，比较操作仅限日期＆＃34;不等于＆＃34;简称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();
    }
}

} 能够使用新的＆＃34; deq＆＃34;和＆＃34; dne＆＃34;操作你应该在日期的列的搜索选项的sopt中包含。

演示使用上面的代码。输入数据包含3个日期：＆＃34; 2015-04-15T15：31：49.357＆＃34;，＆＃34; 2015-04-15T21：15：40.123＆＃34;，＆＃34; 2015-04 -15＆＃34 ;. 2015年4月15日之前的过滤显示了所有三行。

另一个演示使用几乎相同的代码，但以完整日期/时间格式显示日期。然而，过滤工作。小心点，我在演示中使用GitHub的最新免费jqGrid源代码。这真的很需要，因为我在parseDate的代码中进行了一些小改动，以使演示工作。

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

2 个答案: