AG-Grid 将 Bootstrap-Select 渲染为下拉列表

Question

我已经实现了可编辑的 AG-Grid。在网格中，一列显示玩家所在的国家，如下图:



现在在最后一列中，当用户单击单元格时，我想将可用国家/地区列表显示为下拉列表。

默认情况下，AG-Grid 显示正常下拉列表。我想用 Bootstrap-select 替换它。

为了实现这一点，我实现了自定义选择器并使用 Bootstrap-select图书馆。

但是当单击单元格时，不会呈现下拉列表。虽然在控制台中我没有收到任何错误。

这是我的自定义单元格编辑器的代码:

var selectCellEdior = function () { };
selectCellEdior.prototype = {
    init: function (params) {

        selector = document.createElement('select');

        for(var i = 0; i < params.values.length; i++) {
          var option = params.values[i];
          $('<option />', { value: option, text: option }).appendTo(selector);
        }

        this.cellSelector = selector;

        $(this.cellSelector).selectpicker({ size: 'auto' });


    },
    getValue: function () {
        return $(this.cellSelector).find('.btn-text').text();
    },
    getGui: function () {
        return this.cellSelector;
    },
    destroy: function () {
        $(this.cellSelector).remove();
    }
};

这是 Sample Code

我不明白这是什么问题。

Answer 1

问题是 selectpicker jQuery 方法似乎添加了 display: none到选择元素。 Ag-Grid 正在将它添加到您看不到的 DOM 中。另外 getValue函数不返回所选选项的文本。

以下更改为 getValue和 getGui将使网格工作:

  ...
  getValue: function () {
    return $(this.cellSelector).val();
  },
  getGui: function () {
    this.cellSelector.style.display = 'block';
    return this.cellSelector;
  },
  ...

Here is the modified Plunker