1

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

有没有更好的方法将纸张图标按钮条目添加到单元格？如何正确添加 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>
4

1 回答 1

1

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

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

您可以使用此事件来查询网格的paper-icon-buttons 并将其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);
  }
}

笨蛋

请注意，您有一个错误：

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

在tap事件中paper-icon-button，e.target是图标图像。你真的想要e.currentTarget，我在 Plunker 里为你做了。

于 2016-07-23T04:00:01.817 回答