使用日期選擇器僅在日期過濾jqGrid日期時間列

Question

我目前有一個問題，我在格式化爲只顯示該字段的日期部分的網格中的日期時間列。因此，原始數據看起來像「2015-04-15T15：31：49.357」，網格列看起來像「2015年4月15日」。

我正在使用日期選擇器來支持列過濾，並希望能夠使用「eq」運算符來篩選使用「等於」，但僅在日期部分。目前我沒有得到任何比賽，因爲時間已經到了。

有可能解決這個問題嗎？我知道我可以操縱原始數據來剝離日期的時間部分，但我更願意將這些信息保留在原始數據中，因爲我也支持導出爲Excel，並且可能需要時間。

我對列電流選項有：

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

我嘗試了各種方案，但到目前爲止還沒有任何運氣。

我也在使用free-jqgrid分叉。從OlegKi在github上

Answer 1

響應：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」的操作，您應該包括有與日柱的searchoptions的SOPT。

該演示使用上述代碼。輸入數據包含3個日期：「2015-04-15T15：31：49.357」，「2015-04-15T21：15：40.123」，「2015-04-15」。截至2015年4月15日的過濾顯示所有三行。

另一個演示使用幾乎相同的代碼，但以全日期/時間格式顯示日期。儘管如此，過濾工作。請小心，我在演示中使用來自GitHub的最新免費jqGrid源代碼。這真的很有必要，因爲我在parseDate的代碼中做了一些小的改動來使演示工作。

Answer 2

我在免費的jqGrid中引入了custom filtering功能，可以輕鬆實現像青春這樣的場景。 The answer提供了這種實現的例子。

在你的情況下，可以定義新的Date only "equal"比較下，例如短名稱"deq"操作下簡稱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(); 
     } 
    } 
} 

爲了能夠在與日柱searchoptionssopt使用新"deq"和"dne"操作應該包括在那裏。

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以使演示工作。