Динамический рендеринг ячейки в ag-grid для полимера 3 - PullRequest
Новая
       22

Динамический рендеринг ячейки в ag-grid для полимера 3

0 голосов
/ 23 ноября 2018

Как изменить пример полимерной сетки для рендеринга вместо кнопки «Изменить меня», кнопки с динамически генерируемым текстом из модели данных (Toyota, Ford или Porsche)

В моем случае мне нужно добавить гиперссылку на основе данных строки и всплывающей подсказки на строку.

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

clickable-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 Ответ

0 голосов
/ 24 ноября 2018

Чтобы приблизиться к исходному примеру, предположим, что мы хотим динамически отображать заголовок кнопки.Требовалось добавить публичное свойство и присвоить ему значение в 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);
...