我正在尝试在SPFx React Webparts项目中的Office UI Fabric的DetailsList上显示共享点查找值,但无法执行。 谁能帮我达到这个目的?谢谢。
项目值格式如下所示
[
{
Id : 0,
Title : "test0",
Body : {
Body_p1: "test0_p1",
Body_p2: "test0_p2"
},
},
{
Id : 1,
Title : "test1",
Body : {
Body_p1: "test1_p1",
Body_p2: "test1_p2"
}
}
]
,我想使用此控件。 https://developer.microsoft.com/en-us/fabric#/controls/web/detailslist
我想显示以上数据。
|Id | Title | Body
|0 | test0 | test0_p1
|1 | test1 | test1_p1
或
|Id | Title | Body
|0 | test0 | test0_p2
|1 | test1 | test1_p2
这是在线共享点的SPFx Webparts react项目。
我很讨厌打击代码,但是Body.Body_p1和Body.Body_p2的值没有显示。
注意。项目值在{items}中,因此我对这条指令不满意。 https://developer.microsoft.com/en-us/fabric#/controls/web/detailslist/basic
export interface IListItem{
Id: number;
Title: string;
Body : {
Body_p1: string;
Body_p2: string;
};
}
export interface IReactExState{
items: IListItem[];
}
export default class ReactEx extends React.Component<IReactExProps, IReactExState>{
//some code here
private _columns: IColumn[];
if(/*conditions*/){
this._columns = [
{ key: 'Id', name: 'Id', fieldName: 'Id', minWidth: 100, maxWidth: 200, isResizable: true },
{ key: 'Title', name: 'Title', fieldName: 'Title', minWidth: 200, maxWidth: 400, isResizable: true },
{ key: 'Body', name: 'Body', fieldName: 'Body.Body_p1', minWidth: 200, maxWidth: 400, isResizable: true },
];
}
else{
this._columns = [
{ key: 'Id', name: 'Id', fieldName: 'Id', minWidth: 100, maxWidth: 200, isResizable: true },
{ key: 'Title', name: 'Title', fieldName: 'Title', minWidth: 200, maxWidth: 400, isResizable: true },
{ key: 'Body', name: 'Body', fieldName: 'Body.Body_p2', minWidth: 200, maxWidth: 400, isResizable: true },
];
}
public render(): React.ReactElement<IReactExProps>{
return(
{/*some code here*/}
<MarqueeSelection selection={this._selection}>
<DetailsList
items={items}
columns={this._colmns}
setKey="RequestID"
layoutMode={DetailsListLayoutMode.justified}
selection={this._selection}
selectionPreservedOnEmptyClick={true}
ariaLabelForSelectionColumn="Toggle selection"
ariaLabelForSelectAllCheckbox="Toggle selection for all items"
checkButtonAriaLabel="Row checkbox"
onItemInvoked={this._onItemInvoked}
/>
</MarqueeSelection>
{/*somec ode here*/}
);
}
答案 0 :(得分:0)
示例演示:
import * as React from 'react';
import styles from './OfficeFabric.module.scss';
import { IOfficeFabricProps } from './IOfficeFabricProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import { DetailsList, DetailsListLayoutMode, Selection, IColumn } from 'office-ui-fabric-react/lib/DetailsList';
import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
export interface IListItem{
Id: number;
Title: string;
Body : {
Body_p1: string;
Body_p2: string;
};
}
export interface IReactExState{
items: IListItem[];
selectionDetails: {};
}
export default class OfficeFabric extends React.Component<IOfficeFabricProps, IReactExState> {
private _selection: Selection;
private _allItems: IListItem[];
private _columns: IColumn[];
public constructor(props: IOfficeFabricProps,state: IReactExState){
super(props);
this._selection = new Selection({
onSelectionChanged: () => this.setState({ selectionDetails: this._getSelectionDetails() })
});
this._allItems = [
{
Id : 0,
Title : "test0",
Body : {
Body_p1: "test0_p1",
Body_p2: "test0_p2"
},
},
{
Id : 1,
Title : "test1",
Body : {
Body_p1: "test1_p1",
Body_p2: "test1_p2"
}
}
];
this._columns = [
{ key: 'Id', name: 'Id', fieldName: 'Id', minWidth: 100, maxWidth: 200, isResizable: true },
{ key: 'Title', name: 'Title', fieldName: 'Title', minWidth: 200, maxWidth: 400, isResizable: true },
{ key: 'Body', name: 'Body', minWidth: 200, maxWidth: 400, isResizable: true,onRender: (item) => (
<div>
{item.Body.Body_p1}
</div>) },
];
this.state = {
items:this._allItems,
selectionDetails: this._getSelectionDetails()
};
}
private _getSelectionDetails(): string {
const selectionCount = this._selection.getSelectedCount();
switch (selectionCount) {
case 0:
return 'No items selected';
case 1:
return '1 item selected: ' + (this._selection.getSelection()[0] as IListItem).Title;
default:
return `${selectionCount} items selected`;
}
}
private _onItemInvoked = (item: IListItem): void => {
alert(`Item invoked: ${item.Title}`);
};
public render(): React.ReactElement<IOfficeFabricProps> {
return (
<div className={ styles.officeFabric }>
<div className={ styles.container }>
<div className={ styles.row }>
<div className={ styles.column }>
<span className={ styles.title }>Welcome to SharePoint!</span>
<p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
<p className={ styles.description }>{escape(this.props.description)}</p>
<MarqueeSelection selection={this._selection}>
<DetailsList
items={this.state.items}
columns={this._columns}
setKey="set"
layoutMode={DetailsListLayoutMode.justified}
selection={this._selection}
selectionPreservedOnEmptyClick={true}
ariaLabelForSelectionColumn="Toggle selection"
ariaLabelForSelectAllCheckbox="Toggle selection for all items"
checkButtonAriaLabel="Row checkbox"
onItemInvoked={this._onItemInvoked}
/>
</MarqueeSelection>
<a href="https://aka.ms/spfx" className={ styles.button }>
<span className={ styles.label }>Learn more</span>
</a>
<Icon iconName='Mail' />
<br/>
<Icon iconName='CirclePlus' />
<br/>
<Icon iconName='LocationDot' />
</div>
</div>
</div>
</div>
);
}
}
答案 1 :(得分:0)
You need to use **onRender** property which is available in IColumn
onRender: (item) => (<div>{item["LookupName"]["Title"]}</div>)
You can conditionally render like this
onRender: (item) => (
{item["LookupName"] !=undefined ?<div>item["LookupName"]["Title"]
</div> : "NA" }
)