聚合物 3 的 ag-grid 中的动态单元格渲染答案

【问题标题】：Dynamically cell rendering in ag-grid for polymer 3聚合物 3 的 ag-grid 中的动态单元格渲染
【发布时间】：2018-11-25 01:27:51
【问题描述】：

应如何将polymer ag-grid example 更改为呈现而不是“更改我”按钮，该按钮具有从数据模型（丰田、福特或保时捷）动态生成的文本

在我的用例中，我需要添加基于行数据的超链接和行上的工具提示。

ag-grid-polymer-example.js：

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import 'ag-grid-polymer';

import ClickableCellRenderer from './clickable-renderer'

class AgGridPolymerExample extends PolymerElement {
static get template() {
    return html`
        <link rel="stylesheet" href="../node_modules/ag-grid-community/dist/styles/ag-grid.css">
        <link rel="stylesheet" href="../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css">

        <div style="width: 800px;">
            <h1>Simple ag-Grid Polymer 3 Example</h1>
            <ag-grid-polymer style="width: 100%; height: 350px;"
                             class="ag-theme-balham"
                             rowData="{{rowData}}"
                             columnDefs="{{columnDefs}}"
                             components="{{components}}"
                             on-first-data-rendered="{{firstDataRendered}}"
                             ></ag-grid-polymer>
        </div>
`;
}

constructor() {
    super();

    this.columnDefs = [
        {headerName: "Make", field: "make"},
        {headerName: "Model", field: "model"},
        {headerName: "Price", field: "price"},
        {
            headerName: "Clickable Component",
            field: "make",
            cellRendererFramework: 'clickable-renderer'
        }
    ];

    this.rowData = [
        {make: "Toyota", model: "Celica", price: 35000},
        {make: "Ford", model: "Mondeo", price: 32000},
        {make: "Porsche", model: "Boxter", price: 72000}
    ];

    this.components = {
        clickableCellRenderer: ClickableCellRenderer,
    }
}

firstDataRendered(params) {
    params.api.sizeColumnsToFit()
 }
}

customElements.define('ag-grid-polymer-example', AgGridPolymerExample);

clicable-renderer.js

    import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import 'ag-grid-polymer';

export default class ClickableCellRenderer extends PolymerElement {
    static get template() {
        return html`
            <button style="height: 21px" on-click="click">Click Me</button>
        `;
    }

    agInit(params) {
        this.params = params;

        this.cell = {row: params.value, col: params.colDef.headerName};
    }

    click() {
        console.log("Child Cell Clicked: " + JSON.stringify(this.cell));
    }
}

customElements.define('clickable-renderer', ClickableCellRenderer);

index.html

    <!doctype html>
<html lang="en">
<head>
    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
    <script src="../node_modules/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>

    <script type="module" src="ag-grid-polymer-example.js"></script>
</head>
<body>
<ag-grid-polymer-example></ag-grid-polymer-example>
</body>
</html>

我想，我应该以某种方式编写模板值表单agInit()，其中在某个路径的“this.params.data”中有我需要的数据。 (?)

【问题讨论】：

如果我没记错的话，你想在行上添加一个按钮吗？
1.我想呈现一个基于行数据的超链接。 2.希望根据数据为某些行添加提示。
假设按钮被超链接替换并包含来自模型的制造商值（丰田，福特，...）
我明白了。我认为您需要更改组件本身
我想你可以在渲染行数据时添加<a href=[[..]]>。（内部元素的重复行向下。我将检查元素。我没有在元素自己的-properties 中看到）

标签： javascript web-component ag-grid polymer-3.x

【解决方案1】：

为了接近原始示例，假设我们要动态呈现按钮标题。需要在agInit()中添加公共属性并为其赋值，如示例所示：

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import 'ag-grid-polymer';

export default class ClickableCellRenderer extends PolymerElement {
    static get template() {
        return html`
            <button style="height: 21px" on-click="click">Click [[btnTitle]]</button>
        `;
    }

    static get properties() {
        return {
            btnTitle: {
                type: String,

            }
        }
    }

    agInit(params) {
        this.cell = {row: params.value, col: params.colDef.headerName};
        this.btnTitle = params.data.make;

    }

    click() {
        console.log("Child Cell Clicked: " + JSON.stringify(this.cell));
    }
}

customElements.define('clickable-renderer', ClickableCellRenderer);

【讨论】：