0

在 detailsList（Office 结构组件）中，注释按行显示（CheckOut the Screen）。每行都有“...更多”链接。当第一次点击链接（...更多）时，这会在 textArea 中展开文本。同样，如果我单击同一个链接，它应该会崩溃。像开/关。但是，对于 DetailsList 中的同一行不会发生折叠。但是，如果我单击另一行中的“...更多”链接，则会发生崩溃。

此外，虽然调试器来到

columns={this._approvercolumns}

但它仍然没有进入_approvercolumns()。为什么？我是否缺少任何财产。我确信状态和道具正在发生变化。

注意：我正在正确获取行 idx。我已删除该代码以使代码更短。

为了清楚起见，下面是简短的代码。

   public render(): JSX.Element {
    let result: JSX.Element;
    let { canSave, readOnly, revision, workflownames, approverKey, wfapproverhistory, isCalloutVisible } = this.state;
    switch (this.state.displayState) {
        case ILMDialog.DialogDisplayStates.Success:
            result =
                 <div>
                    <DetailsList
                        items={wfapproverhistory}
                        columns={this._approvercolumns}
                        setKey='WFApproverHistory'
                        layoutMode={DetailsListLayoutMode.justified}
                        isHeaderVisible={true}
                        checkboxVisibility={CheckboxVisibility.hidden}
                        className='detailedlist'
                    />
                  </div> 
            break;
    }
    return result;
}
//...more link is here
private _approvercolumns: IColumn[] = [
    {
        key: 'column4',
        name: 'Comments',
        fieldName: 'ApproverComments',
        data: 'string',
        onRender: (item: WorkflowHistory) => {
            return (
                <div>
                    (<div>
                            <Link onClick={this._showApproverComments.bind(this)}>...more</Link>
                     </div>
                    );

                    {(this.state.isCalloutVisible && this.state._selectedGlobalIndex == this.state.wfapproverhistory.indexOf(item)) ?
                           <div> (<TextField value={item.ApproverComments} />)</div>
                        : (null)} // this null will collapse the textarea

                </div>
            );
        },
    }];

private _showApproverComments(item)
{
    let stateNew = this.state;
    stateNew._selectedGlobalIndex = ev.currentTarget.getAttribute("title");//I am getting corret row idx
    stateNew.isCalloutVisible = !stateNew.isCalloutVisible;
    stateNew.displayState = ILMDialog.DialogDisplayStates.Success;
    this.setState(stateNew);
}

解决方案：-

我添加了另一个州

 case ILMDialog.DialogDisplayStates.ClosedComments:
            result =
                <Dialog
                    isOpen={this.state.hideDialog}
                    onDismiss={this._showDialog.bind(this)}
                    isBlocking={true}
                    title="Workflow History"
                    containerClassName='ms-dialogMainOverride dialogstyle s4-wpActive'
                    type={DialogType.normal}
                >

                    <DetailsList
                        items={wfapproverhistory}
                        columns={this._closeapprovercolumns}
                        setKey='WF'
                        layoutMode={DetailsListLayoutMode.justified}
                        isHeaderVisible={true}
                        checkboxVisibility={CheckboxVisibility.hidden}
                        className='detailedlist'
                    />

                </Dialog>;
            break;


 private _closeapprovercolumns: IColumn[] = [        
    {
        key: 'column4',
        name: 'Comments',
        fieldName: 'ApproverComments',                     
        onRender: (item: WF) => {
            return (
                (<div>
                        <Link onClick={this._showApproverComments.bind(this)}>...more</Link>
                 </div>

                // This is copy from _approvercolumns. I have just removed the div which is declare here in _approvercolumns. this will make div as null
                );

            );
        },
    }];
4

0 回答 0