使用自定义日期格式后，jQGrid DateFilter无法正常工作

Posted 2021-04-06

嗨我正在使用jqGrid和我的日期src格式就像2018年2月27日下午7:22:43所以我已经格式化它

formatter: 'date', formatoptions: { srcformat: 'M d, Y g:i:s A', newformat: 'm/d/Y'}

现在，过滤器不能仅工作一个月我试图添加sorttype：'date'选项，但在添加后，过滤器也会停止工作一年又一天。

我想我可能在格式选项中遗漏了导致此请求建议的内容。

我做了一些更改以下是更新后的代码请看一下。

{
        label: '<font size="2">SSC Support Approved Through Date</font>', 
        name:'supportApprovedThroughDate',
        index:'myDate',
		editable: true,formatter: 'date',
		sorttype: 'date',
		formatoptions: { srcformat: 'M d, Y g:i:s A', newformat: 'm/d/Y'},
		searchoptions: { 
                        sopt: ['eq'],
                        placeholder:'Filter By Approved Through  Date',
                        title:'Filter By Approved Through Date'
                       }
		},
		{
		     name : 'myDate',
			 hidden: true,
			 jsonmap : function(item) {
			 	console.log(item);// Not getting printed.
			  return  $.jgrid.parseDate.call($("#jqGrid")[0] , 'M d, Y g:i:s A', item.supportApprovedThroughDate , 'm/d/Y'); 
			}
}

答案

如果纯数据类型是本地的（即当不使用loadonce时），我们需要在数据中另外添加一个字段myDate以实现此目的。在我的情况下，我使用onInitGrid，但您可以使用任何操作之前加载网格中的数据。

代码和示例链接如下：

var myData = [
  {
   id: 1,
   name: "aaz",
   supportApprovedThroughDate : 'Feb 27, 2018 7:22:43 PM'
  }, 
  {
   id: 2,
   name: "bbz",
   supportApprovedThroughDate : 'Feb 19, 2018 7:22:43 PM'
  },
  {
   id: 3,
   name: "ccz",
   supportApprovedThroughDate : 'Feb 27, 2018 7:22:43 PM'
  } 
];

$.jgrid.defaults.width = 600;
$.jgrid.defaults.responsive = true;


$("#gMain").jqGrid({
    data: myData,    
    datatype: "local",
    colModel: [{
        name: "id",
        index: "id",        
        width:80,
        editable:true
    },{
        name: "name",
        index: "name",
        searchoptions:{clearSearch:false},
        width:100,
        editable:true
    },{
        label: 'SSC Support', 
        name:'supportApprovedThroughDate',
        index:'myDate',
            editable: true,
          formatter: 'date',
            sorttype: 'date',
            formatoptions: { srcformat: 'M d, Y g:i:s A', newformat: 'm/d/Y'},
        searchoptions: { 
            sopt: ['eq'],
            placeholder:'Filter By Approved Through  Date',
            title:'Filter By Approved Through Date'
        }
    },{
            name : 'myDate',
              hidden: true,
              formatter : 'date',
        formatoptions : { srcformat:'m/d/Y', newformat : 'm/d/Y'}
    }],
    caption: "Test JqGrid",
    pager: '#pMain',
    search: true,
    shrinkToFit: false,    
    forceFit:false,
    autowidth:true, 
    rowNum:10,
    rowList:[10,20,30,50,100],
    onInitGrid : function() {
        for(var i=0, len=this.p.data.length; i<len;i++) {
            var row = this.p.data[i];
            row['myDate'] = $.jgrid.parseDate.call(this , 'M d, Y g:i:s A', row.supportApprovedThroughDate , 'm/d/Y');
        }
    }
});

$("#gMain").jqGrid('filterToolbar', {
    stringResult: true, 
    searchOnEnter: true,                                                                                 
    defaultSearch: 'cn'
});

这是一个完全符合您设置的jsfiddle example