时间戳

首页 > 解决方案 > 使用@material-ui/lab 的DataGrid 组件，如何访问当前的活动过滤器？

javascript - 使用@material-ui/lab 的DataGrid 组件，如何访问当前的活动过滤器？

问题描述

我正在将 material-ui 的数据网格集成到我的一个页面中。目标是能够捕获所有列的过滤器和排序状态，并将其保存为页面顶部的链接，因此用户无需在每次加载时使用他们的首选值重新设置电子表格页。以下代码成功“暂停”过滤器更改，并且在我有警报框的地方我可以使用捕获所有排序顺序

this.getSortModal()

但是，我找不到类似的函数来捕获当前的有源滤波器。如何访问此组件中的有源过滤器？这是其余的基本 jsx 文件：

import React, { useState } from "react";
import ReactDOM from 'react-dom';
import { DataGrid, GridRowsProp, GridColDef } from '@material-ui/data-grid';
import "regenerator-runtime/runtime";


function filterModelChanged()
{
    //Need to catch the sort and filter preferences here

    alert("you got in");
}
function Example({ initialRows, columns }) {
    //const [filters, setFilters] = useState({});
    const [rows, setRows] = useState(initialRows);
    //const filteredRows = getRows(initialRows, filters);

    return (
        <div style={{ height: 300, width: '100%' }}>
        <DataGrid rows={rows} columns={columns} onFilterModelChange={filterModelChanged}/>
            </div>
    );
}

//
async function getData() {
    let response = await fetch("/services/reader_worklist_services/getList",
                                {credentials:"same-origin"});
    return await response.text();
}

//Need to wait till all elements are present before 'latching' onto them with the react componenet
document.addEventListener("DOMContentLoaded", function(event) {
    getData().then(function(data) {
        const rootElement = document.getElementById('reader_worklist_container');
        const jsData = JSON.parse(data);
        //const rows = createRowData(50);
        //ReactDOM.render(<Example initialRows={rows} columns={columns} />, rootElement);
        ReactDOM.render(<Example initialRows={jsData.rows} columns={jsData.columns}  />, rootElement);
        //alert("your data is: " + data);
    });
});

标签： javascriptreactjsdatagridmaterial-ui

解决方案

onFilterModelChange() 和 onSortModelChange() 更改都会在回调的参数中公开相应的模型。在过滤的情况下， onFilterModelChange() 公开了一个 GridFilterModelParams 模型。因此，您可以执行以下操作：

const onFilterModelChange = (filterObject) => {
    // Do something here
};

资源：

推荐阅读