我是新来的反应者,我正在为应用程序使用ag-grid。
我想将rowDrag
图标更改为Font awesome circle图标(<i class="fa fa-circle"/>
)
我的colDef
和render()
在下面:
首先,我尝试更改rowDrag图标
export class App extends Component<AppProps, any> {
private staticColumns: ColDef[] = [
{
valueGetter: () => "",
rowDrag: true,
lockVisible: true,
maxWidth: 30,
resizable: false,
suppressSizeToFit: true,
suppressToolPanel: true,
suppressMenu: true,
suppressMovable: true,
cellStyle: { backgroundColor: "lightgrey", padding: "0" }
}
];
private gridColumnApi!: ColumnApi;
private gridApi: any;
constructor(props: any) {
super(props);
this.icon = {
icons: {
rowDrag: '<i class="fa fa-circle"/>'
}
};
}
和我的render()返回:
return (
<div className="ag-theme-balham" style={mainContentStyle}>
<AgGridReact
suppressColumnVirtualisation={true}
rowSelection="multiple"
columnDefs={this.staticColumns.concat(columns)}
defaultColDef={defaultColumnDef}
columnTypes={customColumnTypes}
onFirstDataRendered={(params) => this.onFirstDataRendered(params)}
autoSizePadding={0}
rowData={mydata}
getContextMenuItems={(params) => this.getContextMenuItems(params)}
popupParent={this.popupParent || undefined}
onGridSizeChanged={() => this.autosizeColumns()}
onGridReady={(ev) => this.onGridReady(ev)}
onCellValueChanged={() => this.myCellValueChangedMethod()}
deltaRowDataMode={true}
getRowNodeId={(data) => data.id}
sideBar={this.getSideBar()}
rowDragManaged={true}
onRowDragEnd={(ev) => this.onRowDragEnd(ev)}
animateRows={allowRowAnimation}
icons={this.icon.icons}
/>
</div>
);
这不会更改网格中的rowDrag图标。