将JqGrid列模式显示为日期，超链接显示NAN/NAN/NAN

Display JqGrid Column modal as Date and Hyper Link shows NAN/NAN/NAN

本文关键字：NAN 显示 超链接 日期 JqGrid 模式      更新时间：2023-09-26

我有一个动态JQGrid，其中一列是Date列。我从具有URL和日期的提要中获取数据。

我需要为">Date column"开发列模型，使其显示Date和Hyper链接。但不幸的是，数据显示为NAN/NAN/NAN(这可能是因为它将整个字符串<a>...</a>视为日期，而不是"2016年8月20日"(。有人能告诉我如何在这里以正确的文本而不是NAN显示日期吗？？

注意：我甚至应该确保日期排序保持

正在工作的示例代码段-当没有锚标记&不工作-当存在锚标记时。然而，无论锚标记如何，当列模态为text类型时，这种情况总是有效的——换句话说，这种情况只发生在日期列，而不发生在其他列。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" rel="stylesheet" />
    <link href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
    <script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript">        
        $(document).ready(function () {
            var data = [{ 'Date': "<a href=https://google.com target=_blank style=text-decoration:underline;>20/8/2016</a>" },
                 { 'Date': "<a href=https://google.com target=_blank style=text-decoration:underline;>21/8/2016</a>" },
                 { 'Date': "<a href=https://google.com target=_blank style=text-decoration:underline;>22/8/2016</a>" },
                 { 'Date': "2016-08-09T06:11:14.907Z" }, { 'Date': "2016-08-10T06:11:14.907Z" }
            ]
            $("#grid").jqGrid({
                datatype: 'jsonstring',
                datastr: data,
                colNames: ["Date"],
                colModel: [{ name: 'Date', sorttype: 'date', formatter: 'date', formatoptions: {newformat:'n/j/Y'} }]
            });
        });
    </script>
</head>
<body>
    <table id="grid"></table>
</body>
</html>

jqgrid插入行后使用

var data = [{ 'Date': "20/8/2016" },
      { 'Date': "20/8/2016" },
      { 'Date': "20/8/2016" },
      { 'Date': "2016-08-09T06:11:14.907Z" }, 
      { 'Date': "2016-08-10T06:11:14.907Z" }
 ]
 $("#grid").jqGrid({
     datatype: 'jsonstring',
     datastr: data,
     colNames: ["Date"],
     colModel: [{ name: 'Date', sorttype: 'date', formatter: 'date', formatoptions: {newformat:'n/j/Y'} }],
     **afterInsertRow : function(rowid, aData){
         if(rowid == 1){
             $("#grid").jqGrid('setCell' ,rowid, 'Date', "<a href=https://google.com target=_blank style=text-decoration:underline;>"+aData.Date+"</a>", {});
         }
     }**
 });

colModel: [{ name: 'Date', sorttype: 'date',
             formatter:function(cellvalue, options, rowObject)                {
               var dt=new Date(cellvalue);
               if(dt=='Invalid Date')return cellvalue;//chrome
               var y=dt.getFullYear();
               var m=dt.getMonth()+1<10?'0'+(dt.getMonth()+1):dt.getMonth()+1;
               var d=dt.getDate()<10:'0'+dt.getDate():dt.getDate();
               return y+'-'+m+'-'+d;
             }
               }]
相关文章：