Extjs 对dataIndex为对象的column自定义升降序

川长思鸟来 2023-07-25 11:24 9阅读 0赞

最近发现如果dataIndex为对象的column，column显示内容是对象中某些属性拼接出来的，则无法基于控件本身提供的默认升降序进行排序（我用的是extjs6）。

发现可以通过重写column的sort函数来实现自定义升降序规则，这也适用于可以使用默认排序，但是因为规则不同而想重写的情况：

sort: function () {
                    var ds = this.up('grid').getStore();
                    var field = this.getSortParam();
                    var state = (this.sortState === null ? 'ASC' : (this.sortState === 'ASC' ? 'DESC' : 'ASC'));
                    ds.sort({
                        property: field,
                        direction: state,
                        sorterFn: function (v1, v2) {
                            v1 = v1.get(field);
                            v2 = v2.get(field);
                            return (v1.attr1 + v1.attr2).localeCompare(v2.attr1 + v2.attr2);
                        }
                    });
                }

因为我这是一个放在一个公共columnGrid中，所以获取store的时候要先up下。

另外，this.getSortParam()是要拿到将要排序的column，也就是dataIndex的值，详情可以看源码。

还有，因为刚开始没有进行升降序，所以第一次拿到的sortState是null，要进行判断并设置默认排序。而且下一次要给相反方向值。

之后重写store对于这个field的排序规则，指定field，方向，和自定义排序规则。因为属性值都是string，所以这里用了localeCompare。

有些思路来自于这里：[参考思路][Link 1]

[Link 1]: https://www.cnblogs.com/1989hero/archive/2012/10/24/2737337.html