ошибка в сортировке даты в Jquery с использованием метода JqGrid ()? - PullRequest
Новая
       14

ошибка в сортировке даты в Jquery с использованием метода JqGrid ()?

0 голосов
/ 27 июня 2018

Я использую 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>

1 Ответ

0 голосов
/ 28 июня 2018

Нижеследующее действительно только в том случае, если ваш тип данных является локальным или у вас есть параметр сетки loadonce: true

Вам не нужно использовать плагин TableSorter. Вам просто нужно определить в столбце даты тип сортировки и дату, чтобы это произошло.

Еще раз отмечу, что это допустимо только в том случае, если ваш тип данных является локальным или для loadonce установлено значение true. В случае сортировки на стороне сервера вам нужно будет создать свой код на стороне сервера, чтобы сортировать его правильно. 

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

Еще одна ошибка в вашем коде заключается в том, что свойство name не должно содержать пробелов при публикации демоверсии. Предположим, что это свойство метки.

С помощью приведенной выше настройки colModel ваш код работает должным образом.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...