具有自定义列渲染器排序的Rally网格 [英] Rally grid with custom column renderer sort

问题描述

背景

当我尝试按使用自定义渲染器的列进行排序时，什么也没发生-它将排序从ASC更改为DESC并来回更改，但是数据的顺序从不改变.我认为这是因为没有定义如何对使用自定义渲染器操作的数据进行排序的定义，但是我似乎找不到找到向该列添加排序器或排序功能的方法.

When I try to sort by a column that I have used a custom renderer for, nothing happens - it changes the sort from ASC to DESC and back and forth but the order of the data never changes. I am assuming this is because there is not definition of how to sort the data that I manipulated with a custom renderer, but I cannot seem to find a way to add a sorter or sorting function to the column.

目标

我正在创建一个要按父级"列排序的网格.我想对它进行排序，以使父级出现在其任何子级的正上方(父级是汇总，子级是要素).

I am making a grid that I want to sort by the Parent column. I want to sort it such that the parent appears just above any of its children (the parent being a Rollup and the children being Features).

想法

对于功能，请将父级"的名称放在父级"列中.对于汇总，将其自身的名称放在父列中，并向其添加一个设置

For features, put the name of the Parent in the parent column. For Rollups, put the Name of itself in the parent column and add a class to it that sets

display: none;

然后，您可以轻松地进行排序，让父母出现在孩子的正上方

Then, you can easily sort it out and have parents appearing just above children

代码

{
    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.然后，这是该列的配置:

For the rallygrid config, make sure you set the property of remoteSort, which is by default true, to false. Then, here is the config for the column:

            {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;
                    }
                }
            },

这篇关于具有自定义列渲染器排序的Rally网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！