在Ag-grid中為聚合物3動態繪制單元格

Question

應如何更改聚合物ag-grid示例以呈現，而不是“ Change me”按鈕，即具有從數據模型（豐田，福特或保時捷）動態生成的文本的按鈕

在我的用例中，我需要基於行數據和行上的工具提示添加超鏈接。

AG-格 - 聚合物 - 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”中的某個路徑上的數據。 （？）

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 個解決方案

解決方案1
1 已采納 2018-11-24 16:38:49

在Ag-grid中為聚合物3動態繪制單元格

問題描述

1 個解決方案

解決方案1 1 已采納 2018-11-24 16:38:49

解決方案1
1 已采納 2018-11-24 16:38:49