AG网格的日期时间过滤器-点击按钮清除输入文本

Question

基于AG-Grid Github问题中提出的这个解决方案，我正在尝试在我的React/AG_Grid项目中实现一个jQuery DateTime Picker作为过滤器。

我目前已经设置了我的表，这样我就可以通过单击按钮来清除已应用于我的表的筛选器。所需的行为是，单击"重置过滤器"按钮后，过滤器AND过滤器输入中的文本应被清除。按照现在的设置，过滤器会根据需要从表中清除，但当我重新打开过滤器输入时，上一个过滤器的文本仍然存在。

---

我在这里设置了一个代码沙盒，它是我当前设置的简化版本。

重建步骤：

• 打开事件时间戳列的筛选器
• 将筛选器应用于事件时间戳列(2020/01/31 00:00-2020/06/31 00:00(
• 单击表格顶部的"重置过滤器">
• 打开事件时间戳列的筛选器
• 请注意，来自上一个过滤器的文本仍然填充输入

const App = () => {
const [gridApi, setGridApi] = useState([]);
const [gridColumnApi, setGridColumnApi] = useState([]);
const [rowData, setRowData] = useState([]);
useEffect(() => {
const formattedDates = dataSet.map((data) => {
return {
id: data.id,
eventTimestamp: new Date(data.eventTimestamp)
};
});
setRowData(formattedDates);
}, []);
// ***************************************************
// The Handle Click logic for the reset filters button:
// ***************************************************
const resetAppliedFilters = () => {
gridApi.setFilterModel(null);
CustomDateComponent.prototype.setDate(null);
};
const cols = [
{
field: "id",
headerName: "ID",
minWidth: 100,
maxWidth: 150
},
{
field: "eventTimestamp",
headerName: "Event Timestamp",
minWidth: 225,
filter: "agDateColumnFilter",
filterParams: {
defaultOption: "inRange",
// ***************************************************
// Comparator function for datetime picker:
// ***************************************************
comparator: function (filterLocalDate, cellValue) {
filterLocalDate.setMilliseconds(0);
cellValue.setMilliseconds(0);
let filterBy = filterLocalDate.getTime();
let filterMe = cellValue.getTime();
if (filterBy === filterMe) {
return 0;
}
if (filterMe < filterBy) {
return -1;
}
if (filterMe > filterBy) {
return 1;
}
}
}
}
];
const onGridReady = (params) => {
setGridApi(params.api);
setGridColumnApi(params.columnApi);
// ***************************************************
// Table event listener:
// ***************************************************
params.api.addGlobalListener((type, event) => {
switch (type) {
case "filterChanged":
console.log(event);
return;
default:
return null;
}
});
};
return (
<div className="App">
<Button onClick={resetAppliedFilters} variant="outlined">
Reset Filters
</Button>
<hr />
<div
className={"ag-theme-balham"}
style={{ height: "86vh", width: "100%" }}
>
<AgGridReact
onGridReady={onGridReady}
rowData={rowData}
rowSelection="multiple"
defaultColDef={{
flex: 1,
minWidth: 100,
resizable: true,
sortable: true,
filter: true
}}
pagination
columnDefs={cols}
components={{
agDateInput: CustomDateComponent
}}
/>
</div>
</div>
);
};
// ***************************************************
// Custom datetime picker component:
// ***************************************************
function CustomDateComponent() {}
CustomDateComponent.prototype.init = function (params) {
this.params = params;
this.eGui = document.createElement("div");
this.eInput = document.createElement("input");
this.eGui.appendChild(this.eInput);
jQuery(this.eInput).datetimepicker({
mask: true, // '9999/19/39 29:59' - digit is the maximum possible for a cell
onChangeDateTime: this.onDateChanged.bind(this)
});
};
CustomDateComponent.prototype.onDateChanged = function (currentDateTime) {
this.date = currentDateTime;
this.params.onDateChanged();
};
CustomDateComponent.prototype.getGui = function () {
return this.eGui;
};
CustomDateComponent.prototype.getDate = function () {
return this.date;
};
CustomDateComponent.prototype.setDate = function (date) {
this.date = date;
};
CustomDateComponent.prototype.destroy = function () {
jQuery(this.eInput).datetimepicker("destroy");
};
export default App;

如果有人能帮助我或为我指明正确的方向，我将不胜感激。TIA！

Answer 1

当我试图自己解决这个问题时，我看到了这篇Stack Overflow文章，它解释了为什么NOT同时使用React和jQuery。这是一个很好的建议，因为你可以在上面的例子中看到，在其他问题中，该州没有得到正确的管理。

在进一步阅读了AGGrid文档的自定义日期组件部分和AGGrid博客上的这篇文章后，我能够实现一个使用reactdatetimepicker作为自定义过滤器组件的解决方案。然后，您必须将它传递给表的frameworkComponents道具。

堆栈闪电战的现场演示

DTPicker.jsx

import DateTimePicker from "react-datetime-picker";
export default forwardRef((props, ref) => {
const [selectedDate, setSelectedDate] = useState(null);
function handleDateChange(d) {
if (d) {
d = new Date(d);
setSelectedDate(d);
} else {
setSelectedDate(null);
}
}
// props.onDateChanged must be called after updating our component's internal state:
useEffect(props.onDateChanged, [selectedDate]);
// getDate and setDate are required by AG-Grid to sync ag-Grid's date 
// filter value with that of our components:
useImperativeHandle(ref, () => {
return {
getDate: () => {
return selectedDate;
},
setDate: d => {
handleDateChange(d);
}
};
});
return (
<>
<DateTimePicker
onChange={handleDateChange}
value={selectedDate}
maxDetail="second"
disableCalendar={true}
disableClock={true}
/>
</>
);
});

应用.jsx

import DTPicker from './DTPicker'
// Add your custom filter logic in your column:
const cols = [
...,
{
field: "eventTimestamp",
headerName: "Event Timestamp",
filter: "agDateColumnFilter",
filterParams: {
defaultOption: "inRange",
comparator: function(filterLocalDate, cellValue) {
let filterBy = filterLocalDate.getTime();
let filterMe = cellValue.getTime();
if (filterBy === filterMe) {
return 0;
}
if (filterMe < filterBy) {
return -1;
}
if (filterMe > filterBy) {
return 1;
}
}
}
},
...
];
<AgGridReact
...
frameworkComponents={{
agDateInput: DTPicker
}}
...
/>