Question

我正在开发AG-GRID Enterprise最新版本，我只需要将自定义组件放在AG-GRID的1个单元格中，我对该如何处理感到困惑，请给我一些提示。

此Grid正在角度项目中使用，所以请帮助我输入打字稿代码。

 {
    headerName: "Status", 
    field: "status", 
    suppressMovable: false,
    type: "drop down2",
    colId: 5,
    cellClass: "actions-button-cell", 
    cellEditor: 'dropdown', //Either this 
    cellEditorFramework:CustomDropdownComponent // or this
  },

使用自定义组件，我不得不使用此CSS使下拉菜单可见，使其显示在外部，并且也显示在行选择上方。

 ::ng-deep .actions-button-cell { 
    overflow:visible; 
  }

::ng-deep .ag-row {
      z-index: 0;
  }

::ng-deep .ag-row.ag-row-focus {
      z-index: 1;
  }

::ng-deep  .ag-root,
::ng-deep .ag-body-viewport,
::ng-deep .ag-body-viewport-wrapper {
    overflow: visible;
}

现在，这看起来很糟糕，如果我不使用上面的CSS，则下拉菜单将隐藏在该行中。

其次，可以说我使用cellEditor，我似乎无法将其与selectize jquery集成在一起。下面是cellEditor的下拉代码

   function getDropDown() {
  function DropDown() {}
  DropDown.prototype.init = function(params) {
    alert('here');
    this.select = document.createElement('select');
    // this.select.value = params.value;
    this.select.classList.add('email-select');
    this.select.style.height = '100%';
    this.select.style.width = '100%';
    $(this.select).selectize({
      valueField: 'name',
      labelField: 'name',
      placeholder: 'Select'
  ,    options: [
        {
            description: 'Nice Guy',
            name: 'Brian Reavis',
            imageUrl: 'http://www.fashionspictures.com/wp-content/uploads/2013/11/short-hairstyles-for-a-square-face-42-150x150.jpg'
        }, 
        {
            description: 'Other nice guy',
            name: 'Nikola Tesla',
            imageUrl: 'http://www.fashionspictures.com/wp-content/uploads/2013/11/short-hairstyles-for-a-square-face-42-150x150.jpg'
        }
      ]
  });
    // let option = document.createElement('option');
    // option.value = "One";
    // this.select.append= option;



  };
  DropDown.prototype.getGui = function() {
    return this.select;
  };
  DropDown.prototype.afterGuiAttached = function() {
    this.select.focus();
  };
  DropDown.prototype.getValue = function() {
    return this.select.value;
  };
  DropDown.prototype.destroy = function() {};
  DropDown.prototype.isPopup = function() {
    return false;
  };
  return DropDown;
}

这提供了一个错误选择功能，该功能不存在，有时可以工作，但不能将选择功能完全应用于选择字段。请通过两种方式中的任意一种来帮助我。

预期结果：

我确定了两个选择。如果我能找到cellEditor的解决方案，那就太好了，那就是找到下拉列表的解决方案，该下拉列表在行选择的上方和外部都有点出现。谢谢！

如何在农业网格单元中实现自定义组件？

0 个答案: