在 ag-Grid 的单元格中添加 selectize.js 下拉列表的问题

Question

我试图在通过单击编辑单元格时在单元格上添加 selectize.js 下拉菜单。问题是 selectize 下拉列表未显示。 selectize 的预期行为应该像这样 selectize fiddle(http://jsfiddle.net/key1rtw8/1/)

https://selectize.github.io/selectize.js/

笨蛋link:- https://plnkr.co/edit/tA7vh3KXrGxkd3Fw

index.html

<link rel="stylesheet" type="text/css"
    href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/js/standalone/selectize.js"></script>

.jsx

columnDefs = [
                  {
                    headerName: "Athlete",
                    field: "athlete",
                    editable:true,
                    cellEditor: "dropdownUI"
                  }
                ];
   
components = { dropdownUI: getdropdownUI() };
         
            function getdropdownUI() {
          function getdropdownUI() {}
          getdropdownUI.prototype.init = function(params) {
    this.eInput = document.createElement("input");
    this.eInput.value = params.value;
   
    // *************************************************************
   // adding selectize
   
     $(this.eInput).selectize({
      create: true,
      sortField: 'text',
      searchField: 'item',
      create: function (input) {
        return {
          value: input,
          text: input
        }
      }
    });
  };
          getdropdownUI.prototype.getGui = function() {
            return this.eInput;
          };
          getdropdownUI.prototype.afterGuiAttached = function() {
            this.eInput.focus();
            this.eInput.select();
          };
          getdropdownUI.prototype.getValue = function() {
            return this.eInput.value;
          };
          getdropdownUI.prototype.destroy = function() {};
          getdropdownUI.prototype.isPopup = function() {
            return false;
          };
          return getdropdownUI;
        }

Answer 1

index.html

// selectize and jquery files
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
        <link rel="stylesheet" type="text/css"
            href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css" />
        <link rel="stylesheet" type="text/css"
            href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.6/css/selectize.css" />

(1) 定义为cellEditor

  cellEditor: 'dynamicSelectizeEditor'

(2) 在components中添加：-

 components: {
      dynamicEditor: getDynamicCellEditor()
    }

(3) 定义如下：-

function getDynamicCellEditor() {
    function dynamicEditor() {  }
    dynamicEditor.prototype.init = function (params) {
        this.eGui = document.createElement('div');
        this.eGui.style =
            'height:100%;width:' + params.column.actualWidth + 'px';
        //Create and append select list
        this.selectEle = document.createElement('select');
        this.selectEle.style =
            'position:relative; height:100%;width:' +
            params.column.actualWidth +
            'px';
        this.selectEle.id = 'mySelect';
        this.selectEle.class = 'mySelect';

        this.selectEle = document.createElement('select');
        this.eGui.appendChild(this.selectEle);

        $(this.selectEle).selectize({   //<--- add selectize
            sortField: 'text',
            searchField: 'item',
            create: function (input) {
                selcts(input);
                return {
                    value: input,
                    text: input,
                };
            },
        });
        if (params.value !== '') {
            selcts(params.value);
        }
        function selcts(input) {
            $('.mySelect').each(function () {
                var selectize = $(this).selectize;
                selectize.addOption({
                    value: input,
                    text: input,
                }); //add option to it
            });
        }
    };
    dynamicEditor.prototype.getGui = function () {
        return this.eGui;
    };
    dynamicEditor.prototype.afterGuiAttached = function () {
        this.eGui.focus();
        // this.eGui.select();
    };
    dynamicEditor.prototype.getValue = function () {
        return this.selectEle.value;
    };
    dynamicEditor.prototype.destroy = function () {};
    dynamicEditor.prototype.isPopup = function () {
        return true;  //as popup 
    };
    return dynamicEditor;
};

在 ag-Grid 的单元格中添加 selectize.js 下拉列表的问题

issue on adding selectize.js dropdown in cell in ag-Grid

reactjs

ag-grid

index.html

.jsx

index.html