dojox.grid.DataGrid在混合大小写字符串上的排序顺序错误?

h9vpoimq  于 2022-12-16  发布在  Dojo
关注(0)|答案(1)|浏览(142)

我知道Dojo现在已经很老了,但是我们仍然有应用程序在使用它。
需要指出的一点是dojox.grid.DataGrid用户表的排序功能。我们的用户表随着时间的推移不断增长,因此按名称列排序很有用。然而,我们发现,虽然大多数名称的首字母都是大写的,但有些名称的首字母都是小写的,当我单击名称列标题进行排序时,我发现大写的名字按字母顺序出现,但后面是小写的名字,在底部的顺序相同。
例如,原始数据:
汤姆
迪克
哈里
“排序”后显示为:
迪克
汤姆
哈里
代码示例,使用Dojo 1.8.3,如下所示:

require(["dojox/grid/EnhancedGrid",
    "dojo/data/ItemFileWriteStore",
    "dojo/parser",
    "dojo/on",
    'dojo/domReady!'
  ],
  function(EnhancedGrid, ItemFileWriteStore, Filter, parser, on) {
    var data = {
      items: [
        { name: 'Tom', age: 29   },
        { name: 'Dick', age: 9   },
        { name: 'harry', age: 19 }
      ]
    };

    var gridStore = new ItemFileWriteStore({
      data: data
    });

    var gridStructure = [
      [
        { 'name': 'Name', 'field': 'name' },
        { 'name': 'Age' , 'field': 'age'  }
      ]
    ];

    var mygrid = new EnhancedGrid({
      id: "grid",
      store: gridStore,
      structure: gridStructure,
      autoHeight: true,
      autoWidth: true
    }, "mydatagrid");

    mygrid.startup();
  }
);
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/enhanced/resources/claro/EnhancedGrid.css" rel="stylesheet" />

<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script>

<div id="container" class="claro">
  <div id="mydatagrid"></div>
</div>

如何正确地对名称大小写混合的列进行排序?例如,将排序后的网格显示为:
迪克
哈里
汤姆
谢谢

igetnqfo

igetnqfo1#

我设法通过一个相关的DataGrid帖子上的建议得到了一个解决方案:dojox.grid.DataGrid custom sort method?
基本上,您可以使用ItemFileWriteStore(或ItemFileReadStore)的“比较器Map”

require(["dojox/grid/EnhancedGrid",
    "dojo/data/ItemFileWriteStore",
    "dojo/parser",
    "dojo/on",
    'dojo/domReady!'
  ],
  function(EnhancedGrid, ItemFileWriteStore, Filter, parser, on) {
    var data = {
      items: [
        { name: 'Tom', age: 29   },
        { name: 'Dick', age: 9   },
        { name: 'harry', age: 19 }
      ]
    };

    var gridStore = new ItemFileWriteStore({
      data: data
    });

    var gridStructure = [
      [
        { 'name': 'Name', 'field': 'name' },
        { 'name': 'Age' , 'field': 'age'  }
      ]
    ];

    //====================================================================================
    //= Define the comparator function for "Name" ========================================
    //====================================================================================
    gridStore.comparatorMap = {};

    gridStore.comparatorMap["name"] = function(a,b) {
      var nameA = a.toLowerCase().trim(), nameB = b.toLowerCase().trim();
      if (nameA < nameB) //sort string ascending
        return -1;
      if (nameA > nameB)
        return 1;
      return 0; //default return value (no sorting)
    }
    //====================================================================================
    //====================================================================================
    //====================================================================================

    var mygrid = new EnhancedGrid({
      id: "grid",
      store: gridStore,
      structure: gridStructure,
      autoHeight: true,
      autoWidth: true
    }, "mydatagrid");

    mygrid.startup();
  }
);
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/enhanced/resources/claro/EnhancedGrid.css" rel="stylesheet" />

<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script>

<div id="container" class="claro">
  <div id="mydatagrid"></div>
</div>

相关问题