2010-11-02 310 views
3

如何在jQGrid中对日期和时间进行排序?我看了一下documentation,其中说我应该使用“AmPm”功能。但是,考虑到AM/PM,我仍然无法对其进行排序,具体在“登录日期”字段中。jqGrid日期时间排序

<!DOCTYPE HTML> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>My First Grid</title> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/redmond/jquery-ui.css" /> 
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8/css/ui.jqgrid.css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8/js/i18n/grid.locale-en.js"></script> 
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8/js/jquery.jqGrid.min.js"></script> 

<script type="text/javascript"> 
$.jgrid.no_legacy_api = true; 
$.jgrid.useJSON = true; 
</script> 

<script type="text/javascript"> 
jQuery(document).ready(function(){ 

jQuery("#list1").jqGrid({ 
    url: 'login-history.xml', 
    datatype: "xml", 
    mtype: "GET", 
    colNames:["Role","Member Name","Login Date","Logout Date","Duration"], 
    colModel:[ 
    {name:"Role",width:220, xmlmap:"Role"}, 
    {name:"Member Name",width:120, xmlmap:"MemberFullName"},     
    {name:"Login Date", width:150,xmlmap:"LoginDateTime", sorttype: "date", datefmt: "m/d/Y h:i AmPm" }, 
    {name:"Logout Date", width:140,xmlmap:"LogoffDateTime", formatter:'date', formatoptions:{ srcformat:'m/d/Y h:i:s', newformat:'Y-m-d h:i:s' }, sorttype: "date", datefmt: "m/d/Y h:i:s" }, 
    {name:"Duration", width:80,xmlmap:"DurationInMins", sorttype: "date", datefmt: "h:i"}], 
    rowNum:25, 
    rowList:[25,50,100,500], 
    viewrecords: true, 
    loadonce: true, 
    sortable: true, 
    altRows:true, 
    height: "100%", 
    pager: jQuery('#pager'), 
    hidegrid: false, 

    xmlReader: { 
    root : "DataSet", 
    row: "Participant", 
    repeatitems: false, 
    }, 
    caption: "Login History" 

}); 
jQuery("#list1").jqGrid('navGrid','#pager',{add:false,edit:false,del:false}); 
}); 
</script> 

</head> 
<body> 
    <table id="list1" class="scroll"></table> 
    <div id="pager" class="scroll" style="text-align:center;"></div> 

</body> 
</html> 

样本数据

<?xml version="1.0" encoding="UTF-8"?> 
<DataSet> 
    <Participant> 
    <Role><![CDATA[Administrator]]></Role> 
    <Organization><![CDATA[Test Org]]></Organization> 
    <DurationInMins><![CDATA[46:44]]></DurationInMins> 
    <LogoffDateTime><![CDATA[09/30/2010 12:26:55]]></LogoffDateTime> 
    <LoginDateTime><![CDATA[09/30/2010 11:40 AM, PDT]]></LoginDateTime> 
    <MemberFullName><![CDATA[IBM Test]]></MemberFullName> 
    </Participant> 
    <Participant> 
    <Role><![CDATA[Administrator]]></Role> 
    <Organization><![CDATA[Test Org]]></Organization> 
    <DurationInMins><![CDATA[0:36]]></DurationInMins> 
    <LogoffDateTime><![CDATA[09/30/2010 01:40:53]]></LogoffDateTime> 
    <LoginDateTime><![CDATA[09/30/2010 01:40 PM, PDT]]></LoginDateTime> 
    <MemberFullName><![CDATA[IBM Test]]></MemberFullName> 
    </Participant> 
    <Participant> 
    <Role><![CDATA[Administrator]]></Role> 
    <Organization><![CDATA[Test Org]]></Organization> 
    <DurationInMins><![CDATA[16:39]]></DurationInMins> 
    <LogoffDateTime><![CDATA[09/22/2010 01:48:05]]></LogoffDateTime> 
    <LoginDateTime><![CDATA[09/22/2010 01:31 PM, PDT]]></LoginDateTime> 
    <MemberFullName><![CDATA[IBM Test]]></MemberFullName> 
    </Participant> 
    <Participant> 
    <Role><![CDATA[Administrator]]></Role> 
    <Organization><![CDATA[Test Org]]></Organization> 
    <DurationInMins><![CDATA[11:45]]></DurationInMins> 
    <LogoffDateTime><![CDATA[09/21/2010 08:29:02]]></LogoffDateTime> 
    <LoginDateTime><![CDATA[09/21/2010 08:17 AM, PDT]]></LoginDateTime> 
    <MemberFullName><![CDATA[IBM Test]]></MemberFullName> 
    </Participant> 
    <Participant> 
    <Role><![CDATA[Administrator]]></Role> 
    <Organization><![CDATA[Test Org]]></Organization> 
    <DurationInMins><![CDATA[45:35]]></DurationInMins> 
    <LogoffDateTime><![CDATA[09/15/2010 09:25:06]]></LogoffDateTime> 
    <LoginDateTime><![CDATA[09/15/2010 08:39 AM, PDT]]></LoginDateTime> 
    <MemberFullName><![CDATA[IBM Test]]></MemberFullName> 
    </Participant> 
    <Participant> 
    <Role><![CDATA[Administrator]]></Role> 
    <Organization><![CDATA[Test Org]]></Organization> 
    <DurationInMins><![CDATA[42:18]]></DurationInMins> 
    <LogoffDateTime><![CDATA[09/15/2010 12:56:29]]></LogoffDateTime> 
    <LoginDateTime><![CDATA[09/15/2010 12:14 AM, PDT]]></LoginDateTime> 
    <MemberFullName><![CDATA[IBM Test]]></MemberFullName> 
    </Participant> 
    <Participant> 
    <Role><![CDATA[Administrator]]></Role> 
    <Organization><![CDATA[Test Org]]></Organization> 
    <DurationInMins><![CDATA[5:45]]></DurationInMins> 
    <LogoffDateTime><![CDATA[09/15/2010 01:52:43]]></LogoffDateTime> 
    <LoginDateTime><![CDATA[09/15/2010 01:46 PM, PDT]]></LoginDateTime> 
    <MemberFullName><![CDATA[IBM Test]]></MemberFullName> 
    </Participant> 
    <Participant> 
    <Role><![CDATA[Administrator]]></Role> 
    <Organization><![CDATA[Test Org]]></Organization> 
    <DurationInMins><![CDATA[0:55]]></DurationInMins> 
    <LogoffDateTime><![CDATA[09/21/2010 08:16:42]]></LogoffDateTime> 
    <LoginDateTime><![CDATA[09/21/2010 08:15 AM, PDT]]></LoginDateTime> 
    <MemberFullName><![CDATA[IBM Test]]></MemberFullName> 
    </Participant> 
    <Participant> 
    <Role><![CDATA[Administrator]]></Role> 
    <Organization><![CDATA[Test Org]]></Organization> 
    <DurationInMins><![CDATA[0:49]]></DurationInMins> 
    <LogoffDateTime><![CDATA[09/07/2010 01:10:07]]></LogoffDateTime> 
    <LoginDateTime><![CDATA[09/07/2010 01:09 PM, PDT]]></LoginDateTime> 
    <MemberFullName><![CDATA[IBM Test]]></MemberFullName> 
    </Participant> 
    <Participant> 
    <Role><![CDATA[Administrator]]></Role> 
    <Organization><![CDATA[Test Org]]></Organization> 
    <DurationInMins><![CDATA[7:18]]></DurationInMins> 
    <LogoffDateTime><![CDATA[09/07/2010 01:17:39]]></LogoffDateTime> 
    <LoginDateTime><![CDATA[09/07/2010 01:10 PM, PDT]]></LoginDateTime> 
    <MemberFullName><![CDATA[IBM Test]]></MemberFullName> 
    </Participant> 
</DataSet> 
+0

我想要添加JQgrid格式的正则表达式验证。我怎样才能做到这一点 ? – 2012-07-26 10:10:31

回答

5

可以使用A指定AM/PM - 例如:

datefmt: "m/d/Y h:i A" 

的AMPM的文件中提到的是从语言文件中加载的实际对象 - 但在定义格式化程序时,您无需担心这些细节。

+0

我现在才注意到它,但由于日期格式化程序不期待它,所以您可能会遇到附加到“LoginDateTime”的时区问题。 – 2010-11-02 16:27:21

+0

谢谢贾斯汀。我之前尝试过,如果我删除“,PDT”,它确实有效。我再看看jquery.fmatter.js,并认为我应该使用datefmt:“m/d/Y h:i A,T”。但是,这会打破没有时区的排序。无论将“PDT”更改为“UTC”还是“太平洋”都不能修复01:40 PM之前11:40 AM。 – 0l33l 2010-11-02 18:48:43

+0

经过更多的调试,似乎逗号打破了格式。嗯... – 0l33l 2010-11-02 18:58:16

1

逗号不是正则表达式字符串的一部分,所以这就是它失败的原因。看看this git commit解决了这个问题。

+0

+1,很好的接收。 – 2010-11-02 19:34:26

+0

我想要添加JQgrid表单的正则表达式验证。我怎样才能做到这一点 ? – 2012-07-26 10:10:52