Loading...
Loading...
Compare original and translation side by side
| Method | Required Module | Example |
|---|---|---|
| | |
| | |
| | |
| | |
| 方法 | 所需模块 | 示例 |
|---|---|---|
| | |
| | |
| | |
| | |
<GridComponent allowPaging={true} />gridRef.current.goToPage(2)<GridComponent allowPaging={true} />gridRef.current.goToPage(2)⚠️is required on the key column — editing silently fails without it.isPrimaryKey={true}
⚠️ 主键列必须设置—— 若未设置，编辑会静默失败。isPrimaryKey={true}
⚠️is required — scroll is silently disabled without it. Do NOT combine withheightin virtual scrolling and infinite scrolling.allowPaging
| Rows | Mode | Key Config |
|---|---|---|
| < 1,000 | | |
| 1K – 100K | | |
| Continuous | | |
| 100K+ grouped | | |
⚠️ 必须设置—— 若未设置，滚动会静默禁用。在虚拟滚动和无限滚动模式下，请勿与height同时使用。allowPaging
| 行数 | 模式 | 关键配置 |
|---|---|---|
| < 1000 | | |
| 1K – 100K | | |
| 连续加载 | | |
| 100K+ 分组数据 | | |
⚠️androwDataBoundfire on every render — no API calls inside them. ❌ Never add both a columnqueryCellInfoand atemplatehandler targeting the same field — this produces duplicate, conflicting styling logic.rowDataBound
⚠️和rowDataBound会在每次渲染时触发 —— 请勿在其中调用API。 ❌ 切勿同时为同一字段设置列queryCellInfo和template处理程序 —— 这会导致重复且冲突的样式逻辑。rowDataBound
e-biggerrowRenderingMode="Vertical""Mobile""Both"e-biggerrowRenderingMode="Vertical""Mobile""Both"enablePersistence={true}enablePersistence={true}<Inject services={[...]} /><Inject services={[...]} /><GridComponent><Inject services={[...]} /><Inject services={[...]} /><GridComponent>setProperties()setProperties()actionBeginargs.cancel = trueargs.data.field = valueactionCompleteactionFailureargs.requestTypeactionBeginargs.cancel = trueargs.data.field = valueactionCompleteactionFailureargs.requestTypeimport { ColumnDirective, ColumnsDirective, GridComponent, Inject, Page, Sort, Filter } from '@syncfusion/ej2-react-grids';
import React from 'react';
import '../styles/App.css';
// Sample data
const data = [
{
OrderID: 10248,
CustomerID: 'VINET',
EmployeeID: 5,
OrderDate: new Date(1996, 6, 4)
},
{
OrderID: 10249,
CustomerID: 'TOMSP',
EmployeeID: 6,
OrderDate: new Date(1996, 6, 5)
},
];
function App() {
return (
<GridComponent
dataSource={data}
allowPaging={true}
allowSorting={true}
allowFiltering={true}
pageSettings={{ pageSize: 10 }}
>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign='Right' />
<ColumnDirective field='CustomerID' headerText='Customer' width='120' />
<ColumnDirective field='OrderDate' headerText='Order Date' width='130' type='date' format='yMd' />
</ColumnsDirective>
<Inject services={[Page, Sort, Filter]} />
</GridComponent>
);
}
export default App;import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Page, Sort, Filter } from '@syncfusion/ej2-react-grids';
import React from 'react';
import '../styles/App.css';
// Sample data
const data = [
{
OrderID: 10248,
CustomerID: 'VINET',
EmployeeID: 5,
OrderDate: new Date(1996, 6, 4)
},
{
OrderID: 10249,
CustomerID: 'TOMSP',
EmployeeID: 6,
OrderDate: new Date(1996, 6, 5)
},
];
function App() {
return (
<GridComponent
dataSource={data}
allowPaging={true}
allowSorting={true}
allowFiltering={true}
pageSettings={{ pageSize: 10 }}
>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign='Right' />
<ColumnDirective field='CustomerID' headerText='Customer' width='120' />
<ColumnDirective field='OrderDate' headerText='Order Date' width='130' type='date' format='yMd' />
</ColumnsDirective>
<Inject services={[Page, Sort, Filter]} />
</GridComponent>
);
}
export default App;allowPaging={true}pageSettings.pageSizePageallowPaging={true}pageSettings.pageSizePageeditSettings={{ mode: 'Inline', allowEditing: true, allowAdding: true, allowDeleting: true }}isPrimaryKey={true}EditeditSettings={{ mode: 'Inline', allowEditing: true, allowAdding: true, allowDeleting: true }}isPrimaryKey={true}EditExcelExportPdfExportExcelExportPdfExportallowGrouping={true}GroupAggregateaggregatesallowGrouping={true}GroupAggregateaggregatesenableVirtualization={true}heightgroupSettings={ lazyLoadGrouping: true }enableVirtualization={true}heightgroupSettings={ lazyLoadGrouping: true }| Property | Type | Purpose | Example |
|---|---|---|---|
| Array | DataManager | Data to display | |
| boolean | Enable pagination | |
| boolean | Enable sorting by clicking headers | |
| boolean | Enable filter bar | |
| boolean | Enable grouping | |
| EditSettingsModel | Editing configuration | |
| string[] | Toolbar items | |
| 属性 | 类型 | 用途 | 示例 |
|---|---|---|---|
| Array | DataManager | 要展示的数据 | |
| boolean | 启用分页 | |
| boolean | 启用点击表头排序 | |
| boolean | 启用筛选栏 | |
| boolean | 启用分组 | |
| EditSettingsModel | 编辑配置 | |
| string[] | 工具栏项 | |