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

Question

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

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

这里默认AG-Grid显示正常下拉。我想用 Bootstrap-select 替换它。

为此，我实现了自定义 selector 并使用 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 添加到 select 元素。 Ag-Grid 正在将它添加到您看不到的 DOM 中。此外，getValue 函数不返回 selected 选项的文本。

对 getValue 和 getGui 的以下更改将使网格正常工作：

  ...
  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 附加到 Grid 的单元格后调用。如果您注意到 bootstrap-select 在按照上述说明操作后仍然不是“完全正确”，请将所有对 selectpicker 的调用放在 afterGuiAttached 而不是 init 或得到桂。这会将 bootstrap-select 放入具有所需类的 div 中（下拉列表、bootstrap-select 等），并创建所有 bootstrap-select 正确 shown/hidden.

的元素

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

AG-Grid render Bootstrap-Select as a dropdwon

ag-grid

bootstrap-select

bootstrap-selectpicker