reactjs - 尝试在反应组件中对 ag-grid 实施文本过滤器
问题描述
我不知道如何为我设置的 ag-grid 实现一个简单的搜索栏。我想让我的输入根据每一列过滤我的网格中的结果,我无法找到一个好的文档和示例。这是我的代码。随时将我重定向到适当的示例或其他类似的问题。
import React from 'react';
import { AgGridReact } from 'ag-grid-react';
import axios from 'axios';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
class ListTableClients extends React.Component {
constructor(props) {
super(props);
this.state = {
defaultColDef: {
flex: 1,
cellClass: 'cell-wrap-text',
autoHeight: true,
sortable: true,
resizable: true,
},
columnDefs: [
{ headerName: "id", field: "id", maxWidth: 100 },
{ headerName: "name", field: "name"},
{ headerName: "email", field: "email"}],
rowData: [
{ id: 1, name: 'maison du café', email: 'maisonducafe@gamil.com' },
{ id: 2, name: 'Warehouse', email: 'contact@warehouse.fr' },
{ id: 3, name: 'Maestro', email: 'maestro@gmail.com' }],
rowHeight: 275,
}
}
componentDidMount() {
console.log('test');
axios.get('http://localhost:8080/listClients').then((res) => {
this.setState({ rowData: res.data });
}).catch((error) => { console.log(error) });
}
render() {
return (
<div style={{width: '100%', paddingLeft: '50px', paddingRight: '50px', paddingTop: '50px'}} className="ag-theme-alpine">
<input type="text" placeholder="Filter..." onInput={this.onFilterTextBoxChanged}/>
<AgGridReact
domLayout='autoHeight'
columnDefs={this.state.columnDefs}
defaultColDef={this.state.defaultColDef}
getRowHeight={this.state.getRowHeight}
rowData={this.state.rowData}>
</AgGridReact>
</div>
);
}
}
export default ListTableClients;
解决方案
如果单元格数据为对象格式,则必须对其进行格式化Ag-Grid Value Formatters
推荐阅读
- python - 如何修复“py”不被识别为内部或外部命令、可运行程序或批处理文件
- ios - 如何在表格视图中实现从 firestore 搜索 UISearchBar?
- jquery - 在多个 AJAX 请求中使用 async: true
- javascript - FabricJS:对象控件在共同选择之前不起作用
- python - 无法将元素附加到 PySpark 中的列表
- reactjs - Redux 和 redux saga 从存储中删除值
- javascript - html中的正则表达式创建相同的模式
- django - ProgrammingError 列 Users_student.school 在 django 中不存在
- javascript - 如何循环嵌套对象和数组Javascript?
- python - 熊猫函数 read_html 的问题