需要帮助使用 javascript 对 Kendo 字母数字年龄网格列进行排序

Question

在我们的用户数据网格中，每个用户都有一个字段，其中包括以字符串形式计算的年龄，例如 77 岁、6 个月或 5 天。我们需要一种方法能够按该列对网格进行排序，并将年龄按数字排序，其中 30 年、50 年、5 天、10 年、4 个月等组将排序为 50 年、30 年、10 年, 4 个月, 5 天。我已经尝试了几个按字母数字排序的排序函数，但一直无法弄清楚如何强制月数小于年数，天数小于月数。

这是我在堆栈溢出时发现的当前正在尝试使用的排序函数。

    var a, b, a1, b1, rx=/(\d+)|(\D+)/g, rd=/\d+/;
     function AlphaNumericCaseInsensitive(as, bs) {
        a= String(as).toLowerCase().match(rx);
        b= String(bs).toLowerCase().match(rx);
        while(a.length && b.length){
            a1= a.shift();
            b1= b.shift();
            if(rd.test(a1) || rd.test(b1)){
                if(!rd.test(a1)) return 1;
                if(!rd.test(b1)) return -1;
                if(a1!= b1) return a1-b1;
            }
            else if(a1!= b1) return a1> b1? 1: -1;
        }
        return a.length- b.length;
    }

var dataSource = new kendo.data.DataSource({
    data: [
        { id: 1, age: "101 y" },
        { id: 2, age: "2 m" },
        { id: 3, age: "11 y" },
        { id: 4, age: "1 y" },
      { id: 5, age: "2 y" },
      { id: 6, age: "4 d" },
    ]
});

$("#grid").kendoGrid({
    dataSource: dataSource,
    sortable: true,
    columns: [{
        field: "age",
        sortable: {
            compare: function(a, b) {
                return AlphaNumericCaseInsensitive(a.item, b.item);
            }
        }
    }]
});

Answer 1

如果您的数据中有一个属性，您可以将其转换为 Date type, you can use it in the compare 方法：

var dataSource = new kendo.data.DataSource({
  data: [
      { id: 1, age: "101 y", dob: "1922-05-18" },
      { id: 2, age: "2 m", dob: "2022-03-18" },
      { id: 3, age: "11 y", dob: "2011-05-18" },
      { id: 4, age: "1 y", dob: "2021-05-18" },
    { id: 5, age: "2 y", dob: "2020-05-18" },
    { id: 6, age: "4 d", dob: "2022-05-14" },
  ]
});

$("#grid").kendoGrid({
  dataSource: dataSource,
  sortable: true,
  columns: [{
      field: "age",
      sortable: {
          compare: function(a, b) {
            const dateA = Date.parse(a.dob),
                  dateB = Date.parse(b.dob);
            
            if (dateA < dateB) return -1;
            else if (dateA > dateB) return 1;
            else return 0;
          }
      }
  }]
});

工作演示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.510/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.510/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.510/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.510/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2022.2.510/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2022.2.510/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2022.2.510/js/kendo.all.min.js"></script></head>
<body>
  <div id="grid"></div>
  <script>
  var dataSource = new kendo.data.DataSource({
      data: [
          { id: 1, age: "101 y", dob: "1922-05-18" },
          { id: 2, age: "2 m", dob: "2022-03-18" },
          { id: 3, age: "11 y", dob: "2011-05-18" },
          { id: 4, age: "1 y", dob: "2021-05-18" },
        { id: 5, age: "2 y", dob: "2020-05-18" },
        { id: 6, age: "4 d", dob: "2022-05-14" },
      ]
  });

  $("#grid").kendoGrid({
      dataSource: dataSource,
      sortable: true,
      columns: [{
          field: "age",
          sortable: {
              compare: function(a, b) {
                    const dateA = Date.parse(a.dob),
                        dateB = Date.parse(b.dob);
                
                if (dateA < dateB) return -1;
                else if (dateA > dateB) return 1;
                else return 0;
              }
          }
      }]
  });
  </script>
</body>
</html>

Dojo

需要帮助使用 javascript 对 Kendo 字母数字年龄网格列进行排序

Need help using javascript to sort a Kendo Grid column of alphanumeric ages

javascript

sorting

kendo-ui

kendo-grid