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

Question

嗨，我正在使用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'); 
			}
}

​

Answer 1

对于纯数据类型的本地(即不使用加载一次)，我们需要在data中添加一个字段，以实现这一点。在我的例子中，我使用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'
});

下面是一个小提琴手例子，其设置与您的设置完全相同