Question

我正在使用JqGrid（）创建表，

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

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

如何不按字母顺序对月份名称进行排序？

这是我的代码

<!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插件。您只需在date列中定义sorttype和datefmt即可实现此目的。

同样，请注意，仅当您的数据类型为本地或将loadonce设置为true时，此选项才有效。在服务器端排序的情况下，您需要使服务器端代码正确排序。

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

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

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

使用方法JqGrid（）在jQuery中对日期进行排序时出错？

1 个答案: