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

【问题标题】：error in sorting date in Jquery using method JqGrid()?使用方法 JqGrid() 在 Jquery 中排序日期时出错？
【发布时间】：2018-06-27 19:11:37
【问题描述】：

我正在使用 JqGrid() 来创建表格，

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

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

如何不按月名排序，不按字母排序？

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>

【问题讨论】：

标签： jquery-ui jqgrid

【解决方案1】：

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

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

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

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

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

使用上述 colModel 设置您的代码按预期工作。

【讨论】：

成功了。但不删除Purchase Date 中的空格，它工作正常。以后会不会报错？
你能解释一下网格参数loadonce : true吗？
这里是：如果此标志设置为 true，则网格仅从服务器加载数据一次（使用适当的数据类型）。第一次请求后，数据类型参数自动更改为本地，所有进一步的操作都在客户端完成