ExtJS 解决中文排序问题

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>



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值