如何在详细信息 lsit 列上显示共享点查找值?
How to show sharepoint lookup value on details lsit column?
我正在尝试在 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 反应项目。
我厌倦了打击代码,但 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*/}
);
}
示例演示:
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>
);
}
}
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" }
)
我正在尝试在 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 反应项目。
我厌倦了打击代码,但 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*/}
);
}
示例演示:
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>
);
}
}
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" }
)