reactjs - Fabric UI DetailsList 控件 - 动态加载组项
问题描述
我在自定义 SPFx webpart 中使用分组的 DetailsList Fabric UI 组件来显示列表数据。
我需要在组扩展后通过 API 调用从服务器动态加载组的项目,但在 DetailsList 组件中找不到任何可用的组扩展回调,其中可用的公开组道具(组名称等)作为方法用于构建请求字符串的参数。它应该是这样的:
https://contoso.sharepoint.com/site/_api/web/Lists/getbytitle('ListTitle')/RenderListDataAsStream?@listUrl=&View=&IsGroupRender=TRUE&DrillDown=1&GroupString=%3B%23Exel%20Format%20Files%3B%23%3B%23&
基本上,我想实现 Sharepoint 2019 中存在的标准现代文档库 webpart 的行为。只需要在组扩展时回调更新项目数组。使用 DetailsList 组件实现此目的还有其他方法吗?
组件的代码示例(来自文档):
import * as React from 'react';
import {
BaseComponent,
DefaultButton,
DetailsHeader,
DetailsList,
IColumn,
IDetailsHeaderProps,
IDetailsList,
IGroup,
IRenderFunction,
IToggleStyles,
mergeStyles,
Toggle
} from 'office-ui-fabric-react';
const margin = '0 20px 20px 0';
const controlWrapperClass = mergeStyles({
display: 'flex',
flexWrap: 'wrap'
});
const toggleStyles: Partial<IToggleStyles> = {
root: { margin: margin },
label: { marginLeft: 10 }
};
export interface IDetailsListGroupedExampleItem {
key: string;
name: string;
color: string;
}
export interface IDetailsListGroupedExampleState {
items: IDetailsListGroupedExampleItem[];
groups: IGroup[];
showItemIndexInView: boolean;
isCompactMode: boolean;
}
const _blueGroupIndex = 2;
export class DetailsListGroupedExample extends BaseComponent<{}, IDetailsListGroupedExampleState> {
private _root = React.createRef<IDetailsList>();
private _columns: IColumn[];
constructor(props: {}) {
super(props);
this.state = {
items: [
{ key: 'a', name: 'a', color: 'red' },
{ key: 'b', name: 'b', color: 'red' },
{ key: 'c', name: 'c', color: 'blue' },
{ key: 'd', name: 'd', color: 'blue' },
{ key: 'e', name: 'e', color: 'blue' }
],
// This is based on the definition of items
groups: [
{ key: 'groupred0', name: 'Color: "red"', startIndex: 0, count: 2 },
{ key: 'groupgreen2', name: 'Color: "green"', startIndex: 2, count: 0 },
{ key: 'groupblue2', name: 'Color: "blue"', startIndex: 2, count: 3 }
],
showItemIndexInView: false,
isCompactMode: false
};
this._columns = [
{ key: 'name', name: 'Name', fieldName: 'name', minWidth: 100, maxWidth: 200, isResizable: true },
{ key: 'color', name: 'Color', fieldName: 'color', minWidth: 100, maxWidth: 200 }
];
}
public componentWillUnmount() {
if (this.state.showItemIndexInView) {
const itemIndexInView = this._root.current!.getStartItemIndexInView();
alert('first item index that was in view: ' + itemIndexInView);
}
}
public render() {
const { items, groups, isCompactMode } = this.state;
return (
<div>
<div className={controlWrapperClass}>
<DefaultButton onClick={this._addItem} text="Add an item" styles={{ root: { margin: margin } }} />
<Toggle label="Compact mode" inlineLabel checked={isCompactMode} onChange={this._onChangeCompactMode} styles={toggleStyles} />
<Toggle
label="Show index of first item in view when unmounting"
inlineLabel
checked={this.state.showItemIndexInView}
onChange={this._onShowItemIndexInViewChanged}
styles={toggleStyles}
/>
</div>
<DetailsList
componentRef={this._root}
items={items}
groups={groups}
columns={this._columns}
ariaLabelForSelectAllCheckbox="Toggle selection for all items"
ariaLabelForSelectionColumn="Toggle selection"
onRenderDetailsHeader={this._onRenderDetailsHeader}
groupProps={{
showEmptyGroups: true
}}
onRenderItemColumn={this._onRenderColumn}
compact={isCompactMode}
/>
</div>
);
}
private _addItem = (): void => {
const items = this.state.items;
const groups = [...this.state.groups];
groups[_blueGroupIndex].count++;
this.setState(
{
items: items.concat([
{
key: 'item-' + items.length,
name: 'New item ' + items.length,
color: 'blue'
}
]),
groups
},
() => {
if (this._root.current) {
this._root.current.focusIndex(items.length, true);
}
}
);
};
private _onRenderDetailsHeader(props: IDetailsHeaderProps, _defaultRender?: IRenderFunction<IDetailsHeaderProps>) {
return <DetailsHeader {...props} ariaLabelForToggleAllGroupsButton={'Expand collapse groups'} />;
}
private _onRenderColumn(item: IDetailsListGroupedExampleItem, index: number, column: IColumn) {
const value = item && column && column.fieldName ? item[column.fieldName as keyof IDetailsListGroupedExampleItem] || '' : '';
return <div data-is-focusable={true}>{value}</div>;
}
private _onShowItemIndexInViewChanged = (event: React.MouseEvent<HTMLInputElement>, checked: boolean): void => {
this.setState({ showItemIndexInView: checked });
};
private _onChangeCompactMode = (ev: React.MouseEvent<HTMLElement>, checked: boolean): void => {
this.setState({ isCompactMode: checked });
};
}
解决方案
我今天也在找这个,在检查了源代码后我发现了。使用groupProps.headerProps
设置组折叠/展开的回调
<DetailsList
...
groupProps={{
headerProps: {
onToggleCollapse: this._onGroupToggleCollapse
}
}}
/>
推荐阅读
- postgresql - 如何在 Postgres 中按计数行分组?
- r - 如何在不保存绘图的情况下在函数内调整 ggplot 的大小
- websphere - 为什么 RAD 的 Java 项目方面下拉列表中缺少 1.8?
- c++ - 我正在尝试将电影列表和评级添加到 C++ 中的无序地图中
- java - 将 kafka 中的 Avro 反序列化为 SpecificRecord 失败。期望类型是 PojoTypeInfo
- python - 如何使用带有 key_generator 的随机循环?
- typescript - 嵌套数据获取 fp-ts 末日金字塔
- mysql - 模拟 SQL 查询
- database - 如何添加在所有更新完成后运行的触发器
- c++ - 运行 main.cpp 函数时,Visual Studio 2019 中出现错误 MBS4019