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)
用 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属性,所以不是很好。不过有效。
| 归档时间: |
|
| 查看次数: |
1580 次 |
| 最近记录: |