AG-Grid渲染Bootstrap-Select为dropdwon

Question

我实施了可编辑的AG-Grid。在网格中，其中一列显示播放器的国家/地区，如下所示：

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

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

为实现这一目标，我实现了自定义选择器并使用Bootstrap-select库。

但是当单击单元格时，Dropdown不会被渲染。我在控制台中没有收到任何错误。

以下是我的自定义单元格编辑器的代码：

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

The problem is the selectpicker jQuery method seems to add a display: none to the select element. Ag-Grid is adding it to the DOM you just can't see it. Additionally the getValue function is not returning the selected option's text.

The following changes to getValue and getGui will make the grid work:

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

Here is the modified Plunker

Answer 2

对于现在正在查看此内容的任何人.... Ag-grid 有一个 afterGuiAttached 方法，该方法在 GUI 附加到网格单元后调用。如果您在按照上述说明操作后发现 bootstrap-select 仍然不是“完全正确”，请将所有对 selectpicker 的调用放在 afterGuiAttached 而不是 init 或 getGui 中。这会将 bootstrap-select 放入具有它需要的正确类（下拉菜单、bootstrap-select 等）的 div 中，并创建所有正确显示/隐藏的 bootstrap-select 元素。