Jqgrid 搜索日期不起作用

Question

jq(function(){
    var token = window.location.href
    .substring(window.location.href
            .lastIndexOf('=') + 1);
    jq("#grid").jqGrid({
        url:'/test/umpire/getFixtures',
        datatype: 'json',
        mtype: 'GET',
        colNames:['Category',  'Tournament','Date', 'Ground','Team 1','Team 2','Umpire 1','Umpire2','Umpire 3','Match Refree','Match Obsrver','Scorer 1','Scorer 2'],
        colModel:[
            {name:'categoryName',index:'categoryName', width:100,editable:true, editrules:{required:true}, editoptions:{size:10,readonly: 'readonly'}},
            {name:'tournamentName',index:'tournamentName', width:200,editable:true, editrules:{required:true}, editoptions:{size:10}},
            {name:'matchFromDate',index:'matchFromDate', width:100,formatter: "date",sorttype: "date",formatoptions:{srcformat: "U/1000", newformat: "m/d/Y"},search:true, searchoptions: {sopt: ['eq','ne'],
                dataInit : function (elem) {
                   jq(elem).datepicker({dateFormat:'mm-dd-yy', changeYear: true, changeMonth: true, showButtonPanel: true, showOn: 'focus'});
                }}},
            {name:'groundName',index:'groundName', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}},
            {name:'team1Name',index:'team1Name', width:150,editable:true, editrules:{required:true}, editoptions:{size:10}},
            {name:'team2Name',index:'team2Name', width:150,editable:true, editrules:{required:true}, editoptions:{size:10}},
            {name:'umpire1',index:'umpire1', width:100,formatter: function (cellvalue, options, rowObject) {
                return '<a href="/TNCA/umpire/assign?id=' + options.rowId + '&name='+cellvalue+'&token=${token}">'+cellvalue+'</a>';
            }},
            {name:'umpire2',index:'umpire2', width:100,formatter: function (cellvalue, options, rowObject) {
                return '<a href="/TNCA/umpire/assign?id=' + options.rowId + '&name='+cellvalue+'&token=${token}">'+cellvalue+'</a>';
            }},
            {name:'umpire3',index:'umpire3', width:100,formatter: function (cellvalue, options, rowObject) {
                return '<a href="/TNCA/umpire/assign?id=' + options.rowId + '&name='+cellvalue+'&token=${token}">'+cellvalue+'</a>';
            }},
            {name:'matchRefree',index:'matchRefree', width:100,formatter: function (cellvalue, options, rowObject) {
                return '<a href="/TNCA/umpire/assign?id=' + options.rowId + '&name='+cellvalue+'&token=${token}">'+cellvalue+'</a>';
            }},
            {name:'matchObserver',index:'matchObserver', width:100,formatter: function (cellvalue, options, rowObject) {
                return '<a href="/TNCA/umpire/assign?id=' + options.rowId + '&name='+cellvalue+'&token=${token}">'+cellvalue+'</a>';
            }},
            {name:'scorer1',index:'scorer1', width:100,formatter: function (cellvalue, options, rowObject) {
                return '<a href="/TNCA/umpire/assign?id=' + options.rowId + '&name='+cellvalue+'&token=${token}">'+cellvalue+'</a>';
            }},
            {name:'scorer2',index:'scorer2', width:100, formatter: function (cellvalue, options, rowObject) {
                return '<a href="/TNCA/umpire/assign?id=' + options.rowId + '&name='+cellvalue+'&token=${token}">'+cellvalue+'</a>';
            }},

        ],



        postData:{


      filters:'{"groupOp":"AND","rules":[{"field":"matchFromDate","op":"gt","data":"2007-09-06"},{"field":"matchFromDate","op":"lt","data":"2007-10-04"}]}' 

        },
        editurl :"/test/home/?token=${token}",
        rowNum:20,
        shrinkToFit: true,
        rowList:[10,20,30],
        height: 400,
        autowidth: true,
        rownumbers: true,
        pager: '#pager',
        sortname: 'matchFromDate',
        viewrecords: true,
        height:"100%",
        sortorder: "asc",
        caption:"<h2>Assign Umpire</h2>",
        emptyrecords: "Empty records",
        loadonce: true,
        loadComplete: function(response) {
    console.log(JSON.stringify(response))

        },
        jsonReader : {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            cell: "cell",
            id: "tournamentID"
        }


    });

您好，上面是我的 jqgrid 代码。我在搜索日期字段 (matchFromDate) 时遇到问题。我在这个论坛上看到了很多答案，但我仍然无法实现日期搜索。

从 json 我得到这样的日期 '1432683305000'

我的 jQgrid 版本是 4.8.2，我正在使用 Spring MVC。

谁能帮我解决这个问题？非常感谢您

Answer 1

在我看来，您代码中的主要问题是代码中 formatoptions:{srcformat: "U/1000"} 的使用。这样属性可以格式化代码，但是会在本地网格数据中保存date的原始值。稍后您尝试使用 jQuery UI Datepicker 并且在格式中使用日期时遇到问题。您可以使用 @ 语法（请参阅 the documentation），但您仍然会遇到两个问题。第一个：日期会以Unix时间戳格式显示在日期选择器中，这是不好的。第二个问题：formatoptions:{srcformat: "U/1000"}保存的日期未更改（有输入日期的时、分、秒），但是你想忽略小时、分钟、秒等来自输入数据。

所以我建议您使用以下属性：

formatter: "date", formatoptions: {newformat: "m/d/Y"},
jsonmap: function (obj) {
    var d = new Date(parseInt(obj.matchFromDate, 10));
    return d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
}

with jsonmap 将输入数据的小时，分钟，...部分剪切，并将其转换为格式接近 ISO 8601 的字符串。

The jsfiddle demo uses the above code and some other settings which could be helpful for you: column templates, onSelect callback of datepicker and some other. I uses free jqGrid (currently in the version 4.9 RC1) instead of Guriddo jqGrid JS 4.8.2, but I tried almost not use free jqGrid specific features (see wiki), 所以它也应该与 Guriddo jqGrid 一起工作。

Jqgrid 搜索日期不起作用

Jqgrid search for dates is not working

jquery

json

jqgrid