如何在 ag-grid 单元格渲染器的纸图标按钮中注册点击？

Question

我正在努力添加 ajax 对在 ag-grid 单元格渲染器中渲染的纸张图标按钮的调用。这是我的自定义聚合物组件中的脚本。纸图标按钮确实出现了，点击它们会引起涟漪，但点击时的功能没有被调用。

有没有更好的方法将纸质图标按钮条目添加到单元格中？如何正确添加on-tap的注册？

谢谢！

<script>

  function sourceRenderer(params) {
    if (params.value)
      return '<span><a  href="/harvest/' + params.data.asource + '/' + params.value + '">' + params.value + '</a>'
    else 
      return null;
    }

  function innerCellRendererA(params) {
    var imageFullUrl = '/images/' + params.data.type + '.png';
    if (params.data.type == 'entity') {
      var entityUrl = '/analyze/' + params.data.asource + '/' + params.data.amodel + '/' + params.data.sourceName;
      return '<img src="'+imageFullUrl+'" style="padding-left: 4px;" />  <a href="'+entityUrl+'">' + params.data.name + ' (' + params.data.sourceName + ')</a>';
    }
    else if (params.data.type == 'model') {
      var entityUrl = '/harvest/' + params.data.asource + '/' + params.data.name;
      return '<a href="javascript:void(0);" title="Harvest Relational Data"><img src="'+imageFullUrl+'" style="padding-left: 4px;" /></a>  <a href="'+entityUrl+'">' + params.data.name + '</a>';
    }
    else
      return '<paper-icon-button  src="'+imageFullUrl+'" on-tap="testjdbc" data-args="'+params.data.classname+'~~'+params.data.url+'~~'+params.data.username+'~~'+params.data.password+'"></paper-icon-button> ' +
      '<paper-icon-button  src="/images/database_export.svg" on-tap="harvestmodel" data-args="'+params.data.classname+'~~'+params.data.url+'~~'+params.data.username+'~~'+params.data.password+'"></paper-icon-button> ' + params.data.name;
  }    

  Polymer({

    is: 'easymetahub-analyze',

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

    testjdbc: function(e){
      alert('Foo');
      var args = e.target.getAttribute('data-args').split('~~');
    },

    harvestmodel: function(e){
      alert('Bar');
      var args = e.target.getAttribute('data-args').split('~~');
    },

    handleData: function(e) {
      var resp = e.detail.response;
      this.sourcelist = resp;
    },

    ready: function() {
    },

    attached: function() {
      agGrid.initialiseAgGridWithWebComponents();

      var columnDefs = [
        {
          headerName: "Name", 
          'field': 'name', 
          width: 350, 
          cellRenderer: 'group', 
          sort: "asc",
          cellRendererParams: {
            innerRenderer: innerCellRendererA
          }
        },
        {headerName: "Database Type", field: "databasetype", width: 120 },
        {headerName: "URL", width: 250, field: "url" },
        {headerName: "User Name", field: "username", width: 120 }
      ];

      var gridOptions = {
        columnDefs: columnDefs,
        enableColResize: true,
        rowHeight: 36,
        enableSorting: true,
        getNodeChildDetails: function(file) {
          if (file.children) {
            return {
                group: true,
                children: file.children,
                expanded: file.open,
                field: 'name',
                key: file.name
            };
          } else {
            return null;
          }
        },
        onGridReady: function(params) {
          params.api.sizeColumnsToFit();
        }
      };

      this.$.myGrid.setGridOptions(gridOptions);
      var eInput = this.$.quickFilterInput;
      eInput.addEventListener("input", function () {
          var text = eInput.value;
          gridOptions.api.setQuickFilter(text);
      });

    },

    detached: function() {
      this.$.myGrid.api.destroy();
    }

  });

</script>

Answer 1

agGrid 的网格选项有一个属性用于回调 - onModelUpdated - 当新行添加到网格时调用。

attached: function() {
    var self = this;
    var gridOptions = {
      ...
      onModelUpdated: function(e) {
        self._bindGridIconTap();
      }
    };
}

您可以使用此事件查询网格的 paper-icon-button 并将它们的 on-tap 属性添加为事件处理程序。

_bindGridIconTap: function() {
  this._bindActionsOnGrid('paper-icon-button', 'tap');
},

_bindActionsOnGrid: function(selector, eventName) {
  var self = this;
  var buttons = this.$.myGrid.querySelectorAll(selector);
  buttons.forEach(function(b) {
    self._bindEvent(b, eventName);
  });
},

_bindEvent: function(el, eventName) {
  var self = this;
  var methodName = el.getAttribute('on-' + eventName);
  var method = self[methodName];

  if (method) {
    el.addEventListener(eventName, function(e) {
      method(e);
      e.stopPropagation();
      e.preventDefault();
      return false;
    });
  } else {
    console.warn(el.localName, 'listener method not found:', methodName);
  }
}

plunker

注意你有一个错误：

var args = e.target.getAttribute('data-args').split('~~');

在 paper-icon-button 的 tap 事件中，e.target 是图标图像。您实际上想要 e.currentTarget，我已经在 Plunker 中为您完成了。

如何在 ag-grid 单元格渲染器的纸图标按钮中注册点击？

How do I register the on-tap in a paper-icon-button in an ag-grid cell renderer?

cellrenderer

polymer

paper-elements

polymer-1.0

ag-grid