尝试使用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对象的ag-grid和attached回调中设置detached初始化和清理。在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，并通过其ag-grid属性将其传递给row-data。请注意，我们不需要将rowData声明为Polymer对象的属性（它会自动完成）。

<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