使用方法 JqGrid() 在 Jquery 中排序日期时出错？

Question

我正在使用 JqGrid() 创建 table,

单击 header 时，我正在对列进行排序。当我单击 header 时，它按字母顺序对行进行排序，但我的日期格式为 20-Jan-2018，它按字母顺序 date-column 排序。

当我使用 $("#grid").tablesorter({dateFormat: "uk"}); 它给出了相同的输出。

如何根据 Month-name 排序而不按字母顺序排序？

here is screenshot.

这是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
    <link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/css/ui.jqgrid.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/jquery.jqgrid.min.js">
    </script>

    <script>
    $(function () {
        "use strict";
        $("#grid").jqGrid({
            defaults:{
                autoWidth:true,
            },
            width:550,

    colModel: [
        { name: "Item" },
        { name: "Purchase Date"},
    ],
            data: [
                { 
                    id: 10, 
                    "Item": "T-1234", 
                    "Purchase Date": "20-Jun-18",

                } ,
                { 
                    id: 20, 
                    "Item": "T-1235", 
                    "Purchase Date": "20-Feb-18",
                } ,
                { 
                    id: 30, 
                    "Item": "T-1236", 
                    "Purchase Date": "21-Jan-18",
                } ,
                { 
                    id: 40, 
                    "Item": "T-1237", 
                    "Purchase Date": "22-Mar-18",
                } ,
            ]
        });
    });



$(document).ready(function() 
    { 
        $("#grid").tablesorter( {sortList: [1,0]} ); 
    } 
);

$("#grid").tablesorter({dateFormat: "uk"});


    </script>

    <style type="text/css">
            .ui-jqgrid .ui-jqgrid-htable th div {
                height:auto;
                overflow:hidden;
                padding-right:4px;
                padding-top:10px;
                position:relative;
                vertical-align:text-top;
                white-space:normal !important;
            }
            .container{
                padding: 250px;
                padding-left: 350px;
            }
    </style>
</head>

<body>
    <div class="container">
        <table id="grid"></table>
    </div>
</body>
</html>

Answer 1

只有当你的数据类型是本地的或者你有网格参数时下面才有效 loadonce : true

您不需要使用 tablesorter 插件。您只需要在日期列中定义 sorttype 和 datefmt 即可实现此目的。

我再次注意到，只有当您的数据类型是本地的或者您将 loadonce 设置为 true 时，这才有效。在服务器端排序的情况下，您需要使服务器端代码正确排序。

colModel: [
    { name: "Item" },
    { name: "PurchaseDate", sorttype : 'date', datefmt: 'd-M-y' },
],

代码中的另一个错误是名称属性不应包含空格，因为您 post 演示。假设这是一个标签属性。

通过上述 colModel 设置，您的代码可以按预期工作。

使用方法 JqGrid() 在 Jquery 中排序日期时出错？

error in sorting date in Jquery using method JqGrid()?

jquery-ui

jqgrid