列头排序

场景描述

点击表格的某列，对该列进行排序。如果该列关联的是restData的实体列，则系统可对其进行排序处理。如果该列没有对应restData的某个实体列，或者关联的是serviceData，则需要写代码实现排序。

未点击列头前，使用数据集的默认排序

点击列头排序后，使用自定义的排序

实现思路

接管表格组件的配置改变 onChange 事件，从事件参数中获取点击的列 sorter.field，以及排序方式 sorter.order。

实现步骤

上图表格中的二级+三级是数据集中二级列和三级列组合起来的，表格列定义如下

   <antdpro:Table.Column xmlns:attr="http://www.wex5.com/attr" class="column" dataIndex="fself" width="120px" id="tableColumn3"
         sorter="{{&quot;compare&quot;:true}}">
            <attr:title id="default11">
                <antdpro:Typography.Text text="二级+三级" id="typographyText3" />
            </attr:title>
            <attr:render id="default12" />
        </antdpro:Table.Column>

添加表格组件的设置修改事件，其他列的排序由系统处理，本事件中只处理点击二级+三级列，代码如下：

    onTable0Change = ({pagination,filters,sorter,extra}) => {
        // 只处理fself字段的排序
        if(sorter.field != "fself") return;
        let data = this.comp("restData0");
        // 获取数据集上定义的排序
        if(!this.cloneOrd){
            let baseOrders = data.getOderBysObj();
            if (baseOrders && baseOrders.length > 0) {
                this.cloneOrd = [...baseOrders]
            }
        }
        // 清空排序
        data.clearOrderBy();
        let order = sorter.order;
        order = 'ascend' === order ? 1 : ('descend' === order ? 0 : undefined);
        data.setOrderBy("ferji", order);
        data.setOrderBy("fsanji", order);
        // 把数据集上定义的排序追加在后面
        if (this.cloneOrd && this.cloneOrd.length > 0) {
            for (let i in this.cloneOrd) {
                data.setOrderBy(this.cloneOrd[i].name,this.cloneOrd[i].type);
            }
        }
        data.refreshData();
    }