0

我正在尝试将 AgGrid 框架与 cellRenderer 一起使用来呈现表格中的 div 并将工具提示附加到该 div。将呈现我正在使用的工具提示的函数 showMyTooltip 需要一个 HTML 元素作为锚点。它在附加到其他组件时有效，但由于某种原因，当我尝试附加到我的 cellRenderer 时它不起作用。这是 cellRenderer 组件。当我记录 this.anchor 的值时，我得到“未定义”。谁能发现我可能遗漏的东西？

export class MyCellRenderer extends Component {

  render() {
    const { showTooltip, shouldOpenTooltip, tooltipContent } = this.props.value;
    return
      (<div>
        <div ref={(el) => { this.anchor = el; }}>
          <div> SHOULD ANCHOR TO THIS </div>
        </div>
        {shouldOpenTooltip &&
          showMyTooltip({
            anchor: this.anchor,
            children: tooltipContent,
          })
        }
      </div>);
  }
}

export default MyCellRenderer;
4

1 回答 1

0

我猜单元格渲染器默认呈现为字符串。下面是使用 Angular 的单元格渲染器的示例，也许这会指导您使用 reactjs？在下面的示例中，我创建了一个自定义单元格渲染器，并在 ag-grid 的 col def 中分配了渲染器的名称。

import { Component } from "@angular/core";
import { ICellRendererAngularComp } from "ag-grid-angular";

@Component({
    selector: 'tooltip-cell',
    template: `<ng-template #popTemplate>
                    <div class="tooltip-renderer">
                         Created By: {{creator}} <br/>
                         Created On: {{crDateTime | date:'short'}} <br/>
                         Revised By: {{revisor}} <br/>
                         Revised On: {{revDateTime | date:'short'}} <br/>
                    </div>
                </ng-template>
                <span [tooltip]="popTemplate" placement="left" container="body" triggers="mouseenter mouseleave dblclick">{{params.value}}</span>` })


export class ToolTipRenderer implements ICellRendererAngularComp {
    public params: any;
    public creator: any;
    public crDateTime: any;
    public revisor: any;
    public revDateTime: any;

    agInit(params: any): void {
        this.params = params;
        this.creator = params.data["Creator"];
        this.crDateTime = params.data["CrDate"];
        this.revisor = params.data["Revisor"];
        this.revDateTime = params.data["RevDate"];
    }
    refresh(): boolean {
        return false;
    }
}


var colDef1 = {
    cellRenderer: "tooltipRenderer",
    ...
}
于 2018-03-05T22:12:08.770 回答