ExtJS 解决中文排序问题

最新推荐文章于 2019-09-26 17:37:05 发布

TKD03072010

最新推荐文章于 2019-09-26 17:37:05 发布

阅读量3.2k

点赞数

分类专栏： ExtJS 文章标签： extjs stylesheet header function string div

本文链接：https://blog.csdn.net/TKD03072010/article/details/7353358

版权

ExtJS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

ExtJS 解决中文排序问题

国际上都使用ASCII码进行排序，而我们却按拼音顺序排序，EXT自动排好的中文在我们看起来却是一团糟。

为了让表格实现中文排序的功能，需要重写Ext.data.Store的applySort函数。

示例代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Test</title>
    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
    <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext-all.js"></script>

<script type="text/javascript">
    Ext.onReady(function(){
        Ext.data.Store.prototype.applySort = function() { // 重写函数方法，实现中文排序
          if (this.sortInfo && !this.remoteSort) {
              var s = this.sortInfo, f = s.field;
              var st = this.fields.get(f).sortType;
              var fn = function(r1, r2) {
                  var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
                  if (typeof(v1) == "string") {
                      return v1.localeCompare(v2);
                  }
                  return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
              };
              this.data.sort(s.direction, fn);
              if (this.snapshot && this.snapshot != this.data) {
                  this.snapshot.sort(s.direction, fn);
              }
          }
        };
        var cm = new Ext.grid.ColumnModel([
                {
                    header:'编号', dataIndex:'id', sortable:true
                },
                {
                    header:'名称', dataIndex:'name',sortable:true
                },
                {
                    id:'desc', header:'描述', dataIndex:'desc', sortable:true
                }
        ]);
        var data = [
                ['1', '啊', 'desc1'],
                ['2', '啵', 'desc2'],
                ['3', '吃', 'desc3'],
                ['4', '得', 'desc4'],
                ['5', '咯', 'desc5']
        ];
        var store = new Ext.data.Store({
            proxy:new Ext.data.MemoryProxy(data),
            reader:new Ext.data.ArrayReader({},[
                {name:'id'},
                {name:'name'},
                {name:'desc'}
            ]),
            sortInfo:{field:'name', direction:'DESC'}
        });
        store.load();
        var grid = new Ext.grid.GridPanel({
            renderTo:'test',
            store:store,
            cm:cm,
            autoHeight:true,
            autoExpandColumn:'desc'
        });
    });

    </script>
</head>
<body>
   <div id="test"></div>
</body>
</html>