-2

我是 SharePoint 的新手。我的一个页面中有一个 SharePoint UI Fabric 反应详细信息列表，并且我正在创建一个包含其他 Web 部件的不同页面。

考虑到第一页仅包含主要数据，当用户单击详细列表中任何行的第一列链接时，我需要打开包含所有其他详细信息的第二页。

但为此，我希望在第二页中提供一些数据，以便我可以查询并获取所需的数据。

  1. 你有没有做过类似的事情。
  2. 这样做的最佳方法是什么？
  3. 真的可以从链接传递查询字符串吗？

下面是我的第一页详细列表配置。

export class ResultList extends React.Component<IResultListProps, {}> {
    constructor(props: IResultListProps) {
        super(props);
    }

    public render(): React.ReactElement<IResultListProps> {
        return (
            <DetailsList items={this.props.items} columns={this.getColumns()} />
        );
    }

    private getColumns(): IColumn[] {
        return [
            {
                key: 'name',
                name: 'name',
                fieldName: 'name',
                minWidth: 100,
                maxWidth: 120,
                isResizable: true,
                onRender: (item) => <a target="_blank" href="a link to the second page">{item.name}</a>
            }
        ];
    }
}
4

1 回答 1

0

我想我已经做到了。这是我正在做的事情。下面是我在父页面中的组件。

主页面组件

import * as React from 'react';
import { DetailsList, IColumn, Link, Fabric } from 'office-ui-fabric-react';
import { IResultListProps } from './IResultListProps';

export class ResultList extends React.Component<IResultListProps, {}> {
    constructor(props: IResultListProps) {
        super(props);
    }

    public render(): React.ReactElement<IResultListProps> {
        return (
            <DetailsList items={this.props.items} columns={this.getColumns()} />
        );
    }

    private getColumns(): IColumn[] {
        return [
            {
                key: 'name',
                name: 'name',
                fieldName: 'name',
                minWidth: 100,
                maxWidth: 120,
                isResizable: true,onRender: (item) => <a target="_blank" href={`https://localhost:4321/temp/workbench.html?selectedName=${item.name}`}>{item.name}</a>
            }
        ];
    }
}

这里的本地页面链接仅用于测试，您应该将其更改为您的详细页面链接。

子/详细信息页面

在我的详细信息页面 Web 部件打字稿文件上。我已经进口了UrlQueryParameterCollection

import { UrlQueryParameterCollection } from '@microsoft/sp-core-library';

在onInit我得到的价值如下。

protected onInit(): Promise<void> {
    return super.onInit().then(() => {
      let queryParameters = new UrlQueryParameterCollection(window.location.href);
      let name = queryParameters.getValue("name");
      alert(name);
    })
  }

从这里我可以开始编写 API 来获取所需的数据并设计我的页面。

希望能帮助到你。

于 2018-10-10T13:11:54.417 回答