Question

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

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

ag-grid-polymer-example.js：

docker build

clicable-renderer.js

git clone

index.html

git clone

我想，我应该以某种方式编写模板值形式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);，在该地方我需要在“ this.params.data”中的某个路径上的数据。（？）

Answer 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);

在Ag-grid中为聚合物3动态绘制单元格

1 个答案: