如何在jqx小部件网格angular 7中进行服务器端过滤，分页和排序

Question

我正在使用dotnet core web api开发一个angular 7项目。我正在使用JQX小部件的某些功能。在jqx小部件网格中，我需要帮助来从服务器端筛选，分页和排序数据。我尝试了以下代码。

---grid.component.html--
<jqxGrid #myGrid
    [source]="dataAdapter"
    [columns]="columns"
    [auto-create]="false"
>
</jqxGrid>



---grid.component.ts----
import {Component, OnInit, ViewChild} from '@angular/core';
import {jqxGridComponent} from "jqwidgets-scripts/jqwidgets-ts/angular_jqxgrid";
@Component({
    selector: 'app-grid',
    templateUrl: './grid.component.html',
    styleUrls: ['./grid.component.css']
})
export class GridComponent implements OnInit {

    @ViewChild('myGrid') myGrid: jqxGridComponent;

    data = new Array();
    firstNames =
        [
            "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
        ];
    lastNames =
        [
            "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
        ];
    productNames =
        [
            "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
        ];
    priceValues =
        [
            "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
        ];
    // generate sample data.
    generatedata = (startindex, endindex) => {
        var data = {};
        for (var i = startindex; i < endindex; i++) {
            var row = {};
            var productindex = Math.floor(Math.random() * this.productNames.length);
            var price = parseFloat(this.priceValues[productindex]);
            var quantity = 1 + Math.round(Math.random() * 10);
            row["id"] = i;
            row["firstname"] = this.firstNames[Math.floor(Math.random() * this.firstNames.length)];
            row["lastname"] = this.lastNames[Math.floor(Math.random() * this.lastNames.length)];
            row["productname"] = this.productNames[productindex];
            row["price"] = price;
            row["quantity"] = quantity;
            row["total"] = price * quantity;
            data[i] = row;
        }
        return data;
    }
    source = {
        datatype: 'array',
        localdata: {},
        totalrecords: 1000
    }
    rendergridrows = (params) => {
        console.log('rendergridrows -> event: ');
        var data = this.generatedata(params.startindex, params.endindex);
        return data;
    }
    dataAdapter: any = undefined;
    columns: any[] = [
        { text: 'Id', datafield: 'id', width: 50 },
        { text: 'First Name', datafield: 'firstname', width: 120 },
        { text: 'Last Name', datafield: 'lastname', width: 120 },
        { text: 'Product', datafield: 'productname', width: 180 },
        { text: 'Quantity', datafield: 'quantity', width: 100, cellsalign: 'right' },
        { text: 'Unit Price', datafield: 'price', width: 100, cellsalign: 'right', cellsformat: 'c2' },
        { text: 'Total', datafield: 'total', width: 'auto', cellsalign: 'right' }
    ]

    ngOnInit() {
        console.log('initDataAdapter');
        this.dataAdapter = new jqx.dataAdapter(this.source);
        this.myGrid.createComponent({
            "altrows": true,
            "autoheight": true,
            "enabletooltips": true,
            "editable": true,
            "editmode": "selectedrow",

            "pageable": true,
            "sortable": true,

            "autoshowfiltericon": true,
            "filterable": true,

            "virtualmode": true,
            "showeverpresentrow": true,
            "everpresentrowposition": "top",

            "selectionmode": "multiplecellsadvanced",

            "columnsresize" : true,
            "width": "100%",
            rendergridrows : this.rendergridrows
        });
    }

}

它仅适用于分页，但我还需要过滤和排序。我如何实现jqx小部件网格来过滤和排序服务器中的数据。尽管在这里我没有在服务器端使用任何URL，但我只希望调用可过滤数据的rendergridrows函数。