是否可以在 Admin on REST 中的 List/DataGrid 中包含条件列?
Is it possible to have conditional columns in a List/DataGrid in Admin on REST?
如果我在 REST 上的 Admin 中的 List
组件中应用过滤器,我只想在选择此特定过滤器后显示过滤列 (TextField
),因为过滤器是模糊的我想一目了然地看到不同的结果。但是当没有设置过滤器时,该列应该是隐藏的。
到目前为止我是这样实现的。
const ConditionalFilterTextField = (props) => {
const show = ... // if filter is set in URL
return (show) ? <TextField {...props} /> : null
}
...
<List {...props} filters={<MyFilter />}>
<Datagrid>
...
<ConditionalFilterTextField sortable={false} source="filter_field" label="My Label" />
...
</Datagrid>
</List>
这在某种程度上确实有效,但又不是真的。当我 return null
时(当未设置过滤器并且应该隐藏该列时),它显示列的标签和空的 space。
如何根据是否设置过滤器来控制 TextField 的可见性?当我想添加一列时如何强制重新呈现列表?
编辑:
这与您的回答相似,@Gildas,但对我不起作用。有些细节可能有误?
在itemList.js
class ItemList extends Component {
render() {
const props = this.props
// Find out if current filter is source of field.
const filter = props.itemsFilters
const showFieldA = (filter && filter.fieldA) ? true : false
return <List {...props} filters={<ItemsFilter />} perPage={50}>
<Datagrid>
<ReferenceField sortable={false} source="id" reference="items" linkType="show">
<TextField source="fieldB" />
</ReferenceField>
<TextField sortable={false} source="fieldC" />
<TextField sortable={false} source="fieldD" />
<DateField sortable={false} source="fieldE" />
{ (showFieldA === true) ? <TextField sortable={false} source="fieldA" /> : null }
<ShowButton />
<EditButton />
</Datagrid>
</List>
}
}
const ItemsFilter = (props) => (
<Filter {...props}>
<TextInput label="FilterSearch" source="q" />
<TextInput label="FilterA" source="fieldA" />
</Filter>
)
function mapStateToProps(state) {
return {
itemsFilters: state.admin.resources.items.list.params.filter
}
}
export default connect(mapStateToProps)(ItemList)
...
在App.js
<Resource name="items" list={ItemList} show={ItemShow} edit={ItemEdit} />
const MyList = (props) => {
const show = ... // if filter is set in URL
return (
<List {...props} filters={<MyFilter />}>
<Datagrid>
...
{show ? <TextField {...props} /> : null}
...
</Datagrid>
</List>
);
}
如果我在 REST 上的 Admin 中的 List
组件中应用过滤器,我只想在选择此特定过滤器后显示过滤列 (TextField
),因为过滤器是模糊的我想一目了然地看到不同的结果。但是当没有设置过滤器时,该列应该是隐藏的。
到目前为止我是这样实现的。
const ConditionalFilterTextField = (props) => {
const show = ... // if filter is set in URL
return (show) ? <TextField {...props} /> : null
}
...
<List {...props} filters={<MyFilter />}>
<Datagrid>
...
<ConditionalFilterTextField sortable={false} source="filter_field" label="My Label" />
...
</Datagrid>
</List>
这在某种程度上确实有效,但又不是真的。当我 return null
时(当未设置过滤器并且应该隐藏该列时),它显示列的标签和空的 space。
如何根据是否设置过滤器来控制 TextField 的可见性?当我想添加一列时如何强制重新呈现列表?
编辑:
这与您的回答相似,@Gildas,但对我不起作用。有些细节可能有误?
在itemList.js
class ItemList extends Component {
render() {
const props = this.props
// Find out if current filter is source of field.
const filter = props.itemsFilters
const showFieldA = (filter && filter.fieldA) ? true : false
return <List {...props} filters={<ItemsFilter />} perPage={50}>
<Datagrid>
<ReferenceField sortable={false} source="id" reference="items" linkType="show">
<TextField source="fieldB" />
</ReferenceField>
<TextField sortable={false} source="fieldC" />
<TextField sortable={false} source="fieldD" />
<DateField sortable={false} source="fieldE" />
{ (showFieldA === true) ? <TextField sortable={false} source="fieldA" /> : null }
<ShowButton />
<EditButton />
</Datagrid>
</List>
}
}
const ItemsFilter = (props) => (
<Filter {...props}>
<TextInput label="FilterSearch" source="q" />
<TextInput label="FilterA" source="fieldA" />
</Filter>
)
function mapStateToProps(state) {
return {
itemsFilters: state.admin.resources.items.list.params.filter
}
}
export default connect(mapStateToProps)(ItemList)
... 在App.js
<Resource name="items" list={ItemList} show={ItemShow} edit={ItemEdit} />
const MyList = (props) => {
const show = ... // if filter is set in URL
return (
<List {...props} filters={<MyFilter />}>
<Datagrid>
...
{show ? <TextField {...props} /> : null}
...
</Datagrid>
</List>
);
}