Jquery 使用selectize的AG Grid自定义下拉列表问题

我使用Angular在ag网格上工作，我需要使我的自定义下拉组件在双击时显示在弹出窗口中，就像它在单元格编辑器中显示一样，并使它像其他单元格一样正确显示。我们可以通过两种方式创建下拉列表

首先使用

cellEditor

，然后使用自定义组件。我想在jquery中使用

cellEditor

，但它似乎不起作用。因此，我使用自定义组件

  {
    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

，我似乎无法将它与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找到一个解决方案，那就太好了。如果我能为下拉列表找到一个解决方案，它看起来有点向外，在行选择上方。谢谢

你能在plunk或stackblitz上复制你的问题，以便其他人能轻松地帮助你吗？另外，你是在使用Angular还是Vanilla JavaScript？请清楚地阅读问题，我已经在其中写了所有内容，包括我正在使用Angular。我只是想知道如何在ag网格中使用带angular的选择性jquery。或者告诉我如何解决悬停时单元格上方出现的单元格。“我认为不需要任何可复制的代码，我已经提供了所有负责自定义下拉列表的主代码，@Khan先生解决了这个问题。”。请更新答案。是的，我更新了。将在今天提供答案。这是plunker链接-。我试图添加jQuery UI菜单，与selectize.js下拉菜单相同。这两个问题的解决方案都是一样的。你能在plunk或stackblitz上重现你的问题，以便其他人能轻松地帮助你吗？另外，你是在使用Angular还是Vanilla JavaScript？请清楚地阅读问题，我已经在其中写了所有内容，包括我正在使用Angular。我只是想知道如何在ag网格中使用带angular的选择性jquery。或者告诉我如何解决悬停时单元格上方出现的单元格。“我认为不需要任何可复制的代码，我已经提供了所有负责自定义下拉列表的主代码，@Khan先生解决了这个问题。”。请更新答案。是的，我更新了。将在今天提供答案。这是plunker链接-。我试图添加jQuery UI菜单，与selectize.js下拉菜单相同。两者的解决方案是相同的。