Sorting 使用自定义列渲染器排序的集合网格

背景

当我尝试按我使用自定义渲染器的列进行排序时，什么也没有发生——它会将排序从ASC更改为DESC并来回更改，但数据的顺序从未更改。我假设这是因为没有定义如何对使用自定义渲染器处理的数据进行排序，但我似乎找不到向列添加排序器或排序函数的方法

目标

我正在制作一个网格，我想按父列排序。我想对它进行排序，使父对象显示在其任何子对象的正上方（父对象是汇总，子对象是要素）

创意

对于要素，请在“父项”列中输入父项的名称。对于汇总，将其自身的名称放在父列中，并向其中添加一个设置

display: none;

然后，你可以很容易地把它整理出来，让父母出现在孩子的正上方

代码

{
    text: 'Parent',
    dataIndex: 'Parent',
    renderer: function(value, meta, record) {
        var ret = record.raw.Parent;
        if (ret) {
            return ret.Name;
        } else {
            meta.tdCls = 'invisible';
            return record.data.Name;
        }
    }
},

---

对于rallygrid配置，请确保将remoteSort的属性（默认情况下为true）设置为false。然后，下面是该列的配置：

            {dataIndex: 'Parent', name: 'Parent', 
                doSort: function(state) {
                    var ds = this.up('grid').getStore();
                    var field = this.getSortParam();
                    console.log('field',field);
                    ds.sort({
                        property: field,
                        direction: state,
                        sorterFn: function(v1, v2){
                            console.log('v1',v1);
                            console.log('v2',v2);
                            if (v1.raw.Parent) {
                                v1 = v1.raw.Parent.Name;
                            } else {
                                v1 = v1.data.Name;
                            }

                            if (v2.raw.Parent) {
                                v2 = v2.raw.Parent.Name;
                            } else {
                                v2 = v2.data.Name;
                            }

                            return v1.localeCompare(v2);
                        }
                    });
                },
                renderer: function(value, meta, record) {
                    var ret = record.raw.Parent;
                    if (ret) {
                        return ret.Name;
                    } else {
                        meta.tdCls = 'invisible';
                        return record.data.Name;
                    }
                }
            },

---

对于rallygrid配置，请确保将remoteSort的属性（默认情况下为true）设置为false。然后，下面是该列的配置：

            {dataIndex: 'Parent', name: 'Parent', 
                doSort: function(state) {
                    var ds = this.up('grid').getStore();
                    var field = this.getSortParam();
                    console.log('field',field);
                    ds.sort({
                        property: field,
                        direction: state,
                        sorterFn: function(v1, v2){
                            console.log('v1',v1);
                            console.log('v2',v2);
                            if (v1.raw.Parent) {
                                v1 = v1.raw.Parent.Name;
                            } else {
                                v1 = v1.data.Name;
                            }

                            if (v2.raw.Parent) {
                                v2 = v2.raw.Parent.Name;
                            } else {
                                v2 = v2.data.Name;
                            }

                            return v1.localeCompare(v2);
                        }
                    });
                },
                renderer: function(value, meta, record) {
                    var ret = record.raw.Parent;
                    if (ret) {
                        return ret.Name;
                    } else {
                        meta.tdCls = 'invisible';
                        return record.data.Name;
                    }
                }
            },

---

我建议使用

record.get（'Parent'）

代替

record.raw.Parent

。我建议使用

record.get（'Parent'）

代替

record.raw.Parent

。