Jqgrid搜索日期无效

时间:2015-06-01 07:38:11

标签: jquery json jqgrid

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。

有谁可以帮我解决这个问题? 非常感谢您提前

1 个答案:

答案 0 :(得分:3)

在我看来,代码中的主要问题是在代码中使用formatoptions:{srcformat: "U/1000"}。此类属性可以格式化代码,但它会在本地网格数据中保存日期的原始值。稍后您尝试使用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();
}

使用jsonmap减少小时,分钟,......部分输入数据并将其转换为格式接近ISO 8601的字符串。

The jsfiddle demo使用上述代码和其他一些可能对您有所帮助的设置:列模板,onSelect回调datepicker以及其他一些设置。我使用free jqGrid(目前在版本4.9 RC1中)而不是Guriddo jqGrid JS 4.8.2,但我尝试了几乎不使用免费的jqGrid特定功能(请参阅wiki),因此它应该与Guriddo jqGrid一起使用太