Question

我有动态JQGrid，其中一列是Date列。我从包含URL和日期的Feed中获取数据。

我需要为“日期列”开发列模型，以便显示日期和超链接。但不幸的是，数据显示为NAN / NAN / NAN（这可能是因为它将整个字符串 - <a>...</a>视为日期而不是“20/8/2016”）。任何人都可以让我知道如何在正确的文本而不是NAN显示日期？

注意：我甚至应该确保维护日期的排序

正常工作的示例代码段 - 当无锚标记＆amp; 无法正常工作 - 当存在锚标记时。然而，无论锚标记如何，当列模态是文本类型时，这总是起作用 - 换句话说，这只发生在日期列而不是其他列。

<!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>

Answer 1

jqgrid afterinsertrow使用

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>", {});
         }
     }**
 });

Answer 2

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;
             }
               }]

显示JqGrid列模式为Date，Hyper Link显示NAN / NAN / NAN

2 个答案: