Salesforce Add Sorting in Lightning Data Table in Lightning Web Component

原创

repick

发布于 2022-05-03 05:00:16

71500

代码可运行

文章被收录于专栏：SalesforceSalesforce

运行总次数：0

代码可运行

点击列名进行进行排序功能

1.JS中为每一列设置【sortable:true】

const columns = [
    { label: 'Name', fieldName: 'name', type: 'text', sortable: true },
    { label: 'Email', fieldName: 'email', type: 'text', sortable: true },
    { label: 'Phone', fieldName: 'phone', type: 'text', sortable: true },
    { label: 'OwnerName', fieldName: 'ownerName', type: 'text', sortable: true },
    { label: 'Birthdate', fieldName: 'birthdate', type: 'date', sortable: true },
];

2.Html

<lightning-datatable
        show-row-number-column
        max-row-selection="1"
        onrowselection={handelSelection}
        key-field="id"
        data={records}
        columns={columns}
        default-sort-direction={defaultSortDirection}
        sorted-direction={sortDirection}
        sorted-by={sortedBy}
        onsort={onHandleSort}>
</lightning-datatable>

3.Js排序事件

@track defaultSortDirection = 'asc';
    @track sortDirection = 'asc';
    @track sortedBy;
    onHandleSort(event) {
        const { fieldName: sortedBy, sortDirection } = event.detail;
        const cloneData = [...this.records];
        cloneData.sort(this.sortBy(sortedBy, sortDirection === 'asc' ? 1 : -1));
        this.records = cloneData;
        this.sortDirection = sortDirection;
        this.sortedBy = sortedBy;
    }

    sortBy(field, reverse, primer) {
        const key = primer
            ? function (x) {
                return primer(x[field]);
            }
            : function (x) {
                return x[field];
            };

        return function (a, b) {
            a = key(a);
            b = key(b);
            return reverse * ((a > b) - (b > a));
        };
    }