尝试使用 ag-grid 创建自定义聚合物组件

Question

我正在尝试创建一个从远程服务器访问数据的自定义聚合物组件。数据以以下 JSON 格式返回：

[
{
    "source": "northwind",
    "databasetype": "MySQL",
    "classname": "com.mysql.jdbc.Driver",
    "url": "jdbc:mysql://localhost/northwind",
    "username": "root",
    "password": "root"
},
{
    "source": "Oracle Sample HR Database",
    "databasetype": "Oracle",
    "classname": "oracle.jdbc.driver.OracleDriver",
    "url": "jdbc:oracle:thin:@//localhost:1521/orcl",
    "username": "hr",
    "password": "oracle"
}
]

我启动了以下自定义组件：

<link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="my-example">

  <template>

    <style>
      :host {
        display: block;
        padding: 10px;
      }
    </style>

    <iron-ajax
      auto
      id="ajaxGetSources"
      url="/modules/get-sources.xqy"
      handle-as="json"
      last-response="{{sourcelist}}"></iron-ajax>
    <ag-grid id="myGrid"></ag-grid>
  </template>

  <script>

    Polymer({

      is: 'my-example',

      properties: {
        sourcelist: {
          type: Array,
          notify: true
        }
      },

      ready: function() {
      }

    });

  </script>

</dom-module>

以前有人做过吗？我正在寻找用于聚合物 1.0 组件的 ag-grid 示例。

谢谢！

Answer 1

设置

首先，您需要在元素 HTML.

中为 ag-grid 导入 JS 和 CSS

<script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/4.1.5/ag-grid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/4.1.5/styles/ag-grid.css">

然后，分别在您的 Polymer 对象的 attached 和 detached 回调中设置 ag-grid 的初始化和清理。在 attached 中，确保调用 agGrid.initialiseAgGridWithWebComponents() 并初始化网格，指定具有 field 名称的列，这些列对应于您要从传入数据中提取的数据字段。在 detached 中，确保销毁网格以避免内存泄漏。

<dom-module id="x-foo">
  <template>...</template>
  <script>
    Polymer({
      is: 'x-foo',
      attached: function() {
        agGrid.initialiseAgGridWithWebComponents();

        var columnDefs = [
          {headerName: "Source", field: "source"},
          {headerName: "Database Type", field: "databasetype"},
          {headerName: "Class", field: "classname"}
        ];

        var gridOptions = {
          columnDefs: columnDefs
        };

        this.$.myGrid.setGridOptions(gridOptions);
      },
      detached: function() {
        this.$.myGrid.api.destroy();
      }
    });
  </script>
</dom-module>

现在，您有几个选项可以填充您的网格。

选项 1：传递数据绑定

在处理不需要修改的AJAX数据时，可以简单地将传入的数据传递给ag-grid。

在您的 Polymer 模板的 iron-ajax 中，将响应绑定到属性，例如，命名为 rowData，并通过其 row-data 将其传递给 ag-grid 属性。请注意，我们不需要在 Polymer 对象上将 rowData 声明为属性（它会自动完成）。

<dom-module id="x-foo">
  <template>
    <iron-ajax
        url="/modules/get-sources.xqy"
        last-response="{{rowData}}"
        ...
        >
    </iron-ajax>
    <ag-grid id="myGrid" class="ag-fresh" row-data="[[rowData]]"></ag-grid>
  </template>
  <script>...</script>
</dom-module>

^jsbin

选项 2：中继数据绑定

如果您需要修改传入数据（例如，仅过滤 NorthWind 数据），您可以使用 iron-ajax.

的数据处理回调

<dom-module id="x-foo">
  <template>
    <iron-ajax
        url="/modules/get-sources.xqy"
        on-response="handleData"
        ...
        >
    </iron-ajax>
    <ag-grid id="myGrid" class="ag-fresh" row-data="[[rowData]]"></ag-grid>
  </template>
  <script>
    Polymer({
      is: 'x-foo',
      handleData: function(e) {
        var resp = e.detail.response;
        if (resp) {
          this.rowData = resp.filter(function(item) {
            return item.source === 'northwind';
          });
        }
      }
    });
  </script>
</dom-module>

^jsbin

选项 3：直接设置数据（不绑定）

或者，您可以直接修改网格的行数据，而无需在 Polymer 对象上定义属性。您将删除模板中 ag-grid 的数据绑定，然后将行数据直接分配给 this.$.myGrid.rowData.

<dom-module id="x-foo">
  <template>
    <iron-ajax
        url="/modules/get-sources.xqy"
        on-response="handleData"
        ...
        >
    </iron-ajax>
    <ag-grid id="myGrid" class="ag-fresh"></ag-grid>
  </template>
  <script>
    Polymer({
      is: 'x-foo',
      handleData: function(e) {
        var resp = e.detail.response;
        if (resp) {
          this.$.myGrid.rowData = resp.filter(function(item) {
            return item.source === 'northwind';
          });
        }
      }
    });
  </script>
</dom-module>

^jsbin

尝试使用 ag-grid 创建自定义聚合物组件

Trying to create a custom polymer component using ag-grid

ajax

polymer

ag-grid

设置

选项 1：传递数据绑定

选项 2：中继数据绑定

选项 3：直接设置数据（不绑定）