React-admin Datagrid:默认展开所有行

chi*_*tte 5 datagrid reactjs material-ui react-admin

List我有一个使用 a 的react-admin (3.14.1) Datagrid,其中每一行都是可扩展的。

有谁知道如何默认展开所有行

或者以编程方式扩展一行?

我检查了 Datagrid 代码node_modules/ra-ui-materialui/lib/list/datagrid/Datagrid.js,没有明显的道具......

Datagrid.propTypes = {
    basePath: prop_types_1.default.string,
    body: prop_types_1.default.element,
    children: prop_types_1.default.node.isRequired,
    classes: prop_types_1.default.object,
    className: prop_types_1.default.string,
    currentSort: prop_types_1.default.shape({
        field: prop_types_1.default.string,
        order: prop_types_1.default.string,
    }),
    data: prop_types_1.default.any,
    // @ts-ignore
    expand: prop_types_1.default.oneOfType([prop_types_1.default.element, prop_types_1.default.elementType]),
    hasBulkActions: prop_types_1.default.bool,
    hover: prop_types_1.default.bool,
    ids: prop_types_1.default.arrayOf(prop_types_1.default.any),
    loading: prop_types_1.default.bool,
    onSelect: prop_types_1.default.func,
    onToggleItem: prop_types_1.default.func,
    resource: prop_types_1.default.string,
    rowClick: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.func]),
    rowStyle: prop_types_1.default.func,
    selectedIds: prop_types_1.default.arrayOf(prop_types_1.default.any),
    setSort: prop_types_1.default.func,
    total: prop_types_1.default.number,
    version: prop_types_1.default.number,
    isRowSelectable: prop_types_1.default.func,
    isRowExpandable: prop_types_1.default.func,
};
Run Code Online (Sandbox Code Playgroud)

chi*_*tte 0

用 jquery 破解它,亲爱的。

import $ from 'jquery'
import React, {Fragment} from 'react';
import {List, Datagrid, TextField, useRecordContext} from 'react-admin';

export class MyList extends React.Component {

    gridref = React.createRef()

    ensureRowsExpanded(ref) {
        // Must wait a tick for the expand buttons to be completely built
        setTimeout(() => {
            if (!ref || !ref.current) return;

            const buttonSelector = "tr > td:first-child > div[aria-expanded=false]"
            const buttons = $(buttonSelector, ref.current)
            buttons.click()
        }, 1)
    }

    /** 
     * This runs every time something changes significantly in the list,
     * e.g. search, filter, pagination changes.
     * Surely there's a better way to do it, i don't know!
    */
    Aside = () => {
        this.ensureRowsExpanded(this.gridref)
        return null;
    }

    render = () => {
        return <List {...this.props} aside={<this.Aside/>} >
                    <Datagrid 
                        expand={<MyExpandedRow />}
                        isRowExpandable={row => true}  
                        ref={this.gridref}
                    >
                        <TitleField source="title" />
                    </Datagrid>
               </List>
    }
}

const MyExpandedRow = () => {
    const record = useRecordContext();
    if (!record) return "";
    return <div>Hello from {record.id}</div>;
}

Run Code Online (Sandbox Code Playgroud)

依赖于特定的表结构和aria-expanded属性,所以不是很好。不过有效。