按需加载WooCommerce数据，并通过Syncfusion在DataGrid中显示

Question

我需要用WooCommerce Rest Api加载nodeJS应用程序中的所有产品。我使用WooCommerce REST API - JavaScript库和Syncfusion Grid Component。因为我不能一次加载所有的数据，我想使用按需加载数据像这样，但我找不到任何文档或示例。

我有这样的东西:

import React from 'react';
import { useEffect, useState } from "react";
import { GridComponent, ColumnsDirective, ColumnDirective, Resize, Sort, ContextMenu, Filter, Page, ExcelExport, PdfExport, Edit, Inject } from '@syncfusion/ej2-react-grids';
import WooCommerceRestApi from "@woocommerce/woocommerce-rest-api";
var WooCommerce = new WooCommerceAPI({
url: 'http://example.com',
consumerKey: 'ck_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
consumerSecret: 'cs_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
wpAPI: true,
version: 'wc/v1'
});
const WooCommerceProducts = () => {
const [products, setProducts] = useState([]);
useEffect(() => {
fetchOrders();
}, []);
let fetchOrders = () => {
WooCommerce
.get("products", {
per_page: 100,
page: 1
})
.then((response) => {
if (response.status === 200) {
setProducts(response.data);
}
})
.catch((error) => { });
};
return (
<div className='m-2 md:m-10 p-2 md:p-10 bg-white rounded-3xl'>
<Header category="Page" title="WooCommerce Orders" />
<GridComponent
id='gridcomp'
dataSource={orders}
allowPaging
allowSorting>
<ColumnsDirective>
<ColumnDirective field='id' />
<ColumnDirective field='name' />
<ColumnDirective field='slug' />
<ColumnDirective field='status' />
...
</ColumnsDirective>
<Inject services={[Resize, Sort, ContextMenu, Filter, Page, ExcelExport, PdfExport]} />
</GridComponent>
</div>
)
}
export default WooCommerceProducts

Please help and thx

Answer 1

如果您正在使用任何自定义服务，我建议您使用自定义绑定特性将数据绑定到网格。我想分享一下EJ2 Grid中自定义绑定的行为。

对于每个网格动作(如Filter, Page)等)，我已经触发了dataStateChange事件，并且，在事件参数中，我已经发送了相应的操作细节(如跳过、获取、过滤字段、值、排序方向)。基于此，您可以在服务中执行操作，将数据作为结果返回。，count对象。

注意:'dataStateChange事件不会在网格初始渲染时触发。如果您正在使用远程服务，则需要通过分页查询手动调用远程服务(需要将跳过值设置为0)。并根据你的pageSize取一个值的pageSettings在网格中。如果没有定义，则pageSize在pageSettings，你需要在Grid的load事件中发送默认值12)。请返回类似于">{result:[…]，count:…}的结果";格式为Grid。

的dataSourceChanged当执行CRUD时触发'事件网格中的动作。您可以使用来自该事件的操作细节在您的服务中执行CRUD操作，并且，您需要调用enddit方法，以指示保存操作的完成。

定制绑定:https://ej2.syncfusion.com/react/documentation/grid/data-binding/data-binding/定制绑定

演示:https://ej2.syncfusion.com/react/demos//材料/网格/定制绑定

示例:https://stackblitz.com/edit/react-v64sms-wx3hsy?file=index.js