我在反应中对农业网格做错了什么?
What am I doing wrong with the ag-grid in react?
我正在尝试使农业网格组 select 可用,例如,如果说我们有护理员,您可以 select 父级以及该父级下面的所有内容也得到 selected.
我查看了 ag-grid 文档,但看起来我做的一切都是正确的。
下面是我的代码:
import React, { useState } from 'react';
import { AgGridReact, AgGridColumn } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';
const DummyGrid = () => {
const [gridApi, setGridApi] = useState(null);
const columnDefs = [
{
headerName: 'Make', field: 'make', checkboxSelection: true , rowGroup: true, groupSelectsChildren: true
},
{
headerName: 'Model', field: 'model'
},
{
headerName: 'Price', field: 'price'
}
]
const onGridReady = (params) => {
setGridApi(params.api);
}
const rowData = [
{ make: 'Honda', model: 'Chev', price: 6000 },
{ make: 'Honda', model: 'Civic', price: 120000 },
{ make: 'Toyota', model: 'Celica', price: 5000 },
{ make: 'Mitsubishi', model: 'GTR', price: 5000 }
]
const handleClick = () => {
const selectedNodes = gridApi.getSelectedNodes();
const selectedData = selectedNodes.map(node => node.data);
const selectedDataStringRepresentation = selectedData.map(node => node.make + ' ' + node.model).join(', ');
console.log(`The Data selected: ${selectedDataStringRepresentation}`);
}
return(
<div className="ag-theme-balham"
style={{
width: 600,
height: 600
}}>
<button onClick={handleClick}>Click this!</button>
<AgGridReact
rowData = {rowData}
columnDefs={columnDefs}
rowSelection="multiple"
onGridReady={onGridReady}
/>
</div>
);
};
export default DummyGrid;
正如您从下面的输出中看到的那样,即使它们是同一制造商,它们也没有分组。我做错了什么?
2 件事你做错了。
首先,您需要导入 RowGroupingModule
模块并将其作为 modules
:
传递到您的网格
import { RowGroupingModule } from '@ag-grid-enterprise/row-grouping';
modules={[RowGroupingModule]}
其次,您需要在网格本身上设置 groupSelectsChildren
,而不是在您的列定义上:
groupSelectsChildren={true}
Demo.
我正在尝试使农业网格组 select 可用,例如,如果说我们有护理员,您可以 select 父级以及该父级下面的所有内容也得到 selected.
我查看了 ag-grid 文档,但看起来我做的一切都是正确的。
下面是我的代码:
import React, { useState } from 'react';
import { AgGridReact, AgGridColumn } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';
const DummyGrid = () => {
const [gridApi, setGridApi] = useState(null);
const columnDefs = [
{
headerName: 'Make', field: 'make', checkboxSelection: true , rowGroup: true, groupSelectsChildren: true
},
{
headerName: 'Model', field: 'model'
},
{
headerName: 'Price', field: 'price'
}
]
const onGridReady = (params) => {
setGridApi(params.api);
}
const rowData = [
{ make: 'Honda', model: 'Chev', price: 6000 },
{ make: 'Honda', model: 'Civic', price: 120000 },
{ make: 'Toyota', model: 'Celica', price: 5000 },
{ make: 'Mitsubishi', model: 'GTR', price: 5000 }
]
const handleClick = () => {
const selectedNodes = gridApi.getSelectedNodes();
const selectedData = selectedNodes.map(node => node.data);
const selectedDataStringRepresentation = selectedData.map(node => node.make + ' ' + node.model).join(', ');
console.log(`The Data selected: ${selectedDataStringRepresentation}`);
}
return(
<div className="ag-theme-balham"
style={{
width: 600,
height: 600
}}>
<button onClick={handleClick}>Click this!</button>
<AgGridReact
rowData = {rowData}
columnDefs={columnDefs}
rowSelection="multiple"
onGridReady={onGridReady}
/>
</div>
);
};
export default DummyGrid;
正如您从下面的输出中看到的那样,即使它们是同一制造商,它们也没有分组。我做错了什么?
2 件事你做错了。
首先,您需要导入 RowGroupingModule
模块并将其作为 modules
:
import { RowGroupingModule } from '@ag-grid-enterprise/row-grouping';
modules={[RowGroupingModule]}
其次,您需要在网格本身上设置 groupSelectsChildren
,而不是在您的列定义上:
groupSelectsChildren={true}
Demo.