如何使用 Angular 在 AgGrid 中获取多选下拉列表

Question

我们有 AgGrid，其中一列需要多 select 下拉菜单，我们使用 Angular 7.

我可以找到 multiselect 下拉菜单，但不能找到 agGrid Cell。

请帮忙。

我能够制作 agGrid，尝试使用以下 link 但无法获得。

https://www.c-sharpcorner.com/blogs/how-to-add-combobox-in-aggrid-or-edit-grid-coloumn-with-combobox

预期：agGrid 单元格中有多个 select 下拉菜单

Answer 1

我已经使用 Ag-grid 几个月了，我可以告诉你，很难将定制的东西放到 Aggrid 单元上。

首先，您可以使用属于相关 Ag-grid 的 GridOptions 的 frameworkComponents 参数 table。

使用说明： 您有一个独立的组件，可为您提供 select 下拉列表元素中的多个项目。我们将此组件命名为 MultiSelectComponent

首先，从任何类型的 Ag-grid 模块导入 GridOptons。我正在使用企业版。

import { GridOptions, ... } from '@ag-grid-enterprise/all-modules';
import { MultiSelectComponent} from './multi-select-component';

并在组件 class 内声明详细信息。

export class Component implements OnInit {
...
columnDefs: any;
...
gridOptions: GridOptions;
this.gridOptions = {
 frameworkComponents: {
  cellCustomComponent: MultiSelectComponent
 }
}

这里我们定义列和我们想要的选项。第一列定义包含我们的自定义组件。根据我的 自定义组件可以通过两种方式显示在 Ag-grid 上：

1) 可以显示为网格已准备就绪。它与cellRenderer一起使用。

2) 点击单元格编辑后右边可以显示。为此，您必须将列 editable 声明为 true。它还与 cellEditor 和 cellEditorParams.

一起使用
现在我们使用第一个选项。我的意思是，cellRenderer 一个。我也同样推荐你。

this.columnDefs = [ { headerName: 'Names', field: 'names', cellRenderer: 'cellDatePicker', pinned: 'left', }, // other columns definitions here ]

现在几乎可以在我们刚刚在上面定义的 'Names' 列下的单元格中显示我们自己的自定义组件。如果我们的自定义组件是一个日期选择器，那么它会显示为该日期选择器。如果它是表情符号 select 或选择器，那么它就是这样。（例如，click the link 用于 cellEditor 和 cellRenderer）

我自己的自定义组件，datepicker:

Click resource on Aggrid site

Answer 2

我会让它变得简单。我花了 2 天时间才用普通 javascript 制作了一个。您可以根据自己的 Angular 需要进行调整。

包括

<script type="text/javascript" src="/assets/themes/frt/vendors/custom/bootstrap-multiselect/js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="/assets/themes/frt/vendors/custom/bootstrap-multiselect/js/bootstrap-multiselect.js"></script>

风格

<style> #commentSelection { width: 100%; } .input-widget-popup { width: 250px; height: 100px; } table { width: 100%; height: 100%; } td, th { text-align: center; padding: 8px; } </style>

自定义

var selectedComments = [];

class CommentCellRenderer {
    init(params) {
        this.eGui = document.createElement('span');
        if (params.value !== "" && params.value !== undefined && params.value !== null) {
            this.eGui.innerHTML = params.value;
        }
    }

    getGui() {
        return this.eGui;
    }
}

class CommentPopupCellEditor {
    init(params) {
        this.container = document.createElement('div');
        this.container.setAttribute('class', 'input-widget-popup');
        this._createTable(params);
        this.params = params;

        var commentUids = '';
        var commentNames = '';
        var rowSelectedComments = selectedComments.filter(comment => comment.rowId === params.node.id);
        for (var i = 0; i < rowSelectedComments.length; i++) {
            if (i > 0) {
                commentUids += ',';
                commentNames += ',';
            }
            commentUids += rowSelectedComments[i].uid;
            commentNames += rowSelectedComments[i].name;
        }
        this.selectComment(commentUids, commentNames);
    }

    selectComment(commentUids, commentNames) {
        this.commentList = commentNames;

        var rowNode = gridOptions.api.getRowNode(this.params.node.id);
        rowNode.setDataValue('comment_uid', commentUids);
        rowNode.setDataValue('comment_name', commentNames);
        setTimeout(() => {
            App.autoSizeAll(gridOptions);
        }, 1000);
    }

    getGui() {
        return this.container;
    }

    afterGuiAttached() {
        var that = this;
        $('#commentSelection').multiselect({
            buttonWidth: '100%',
            onChange: function(element, checked) {
                var x = element[0];
                var commentUid = $(x).val().toString();
                var commentName = $(x).text().toString();

                if (checked) {
                    var index = selectedComments.filter(comment => comment.rowId === that.params.node.id).map(function(e) { return e.uid; }).indexOf(commentUid);
                    if (index === -1) {
                        selectedComments.push({
                            rowId: that.params.node.id,
                            uid: commentUid,
                            name: commentName
                        });
                    }
                }
                else {
                    selectedComments = selectedComments.filter(comment => comment.rowId !== that.params.node.id || comment.uid !== commentUid);
                }

                var commentUids = '';
                var commentNames = '';
                var rowSelectedComments = selectedComments.filter(comment => comment.rowId === that.params.node.id);
                for (var i = 0; i < rowSelectedComments.length; i++) {
                    if (i > 0) {
                        commentUids += ',';
                        commentNames += ',';
                    }
                    commentUids += rowSelectedComments[i].uid;
                    commentNames += rowSelectedComments[i].name;
                }
                that.selectComment(commentUids, commentNames);
            }
        });
        this.container.focus();
    }

    getValue() {
        return this.commentList;
    }

    isPopup() {
        return true;
    }

    _createTable(params) {
        this.container.innerHTML = `
  <table>
    <tr>
        <th><?php echo COMMENTS; ?></th>
    </tr>
    <tr>
        <td>
            <select id="commentSelection" multiple="multiple">
            </select>
        </td>
    </tr>
  </table>
`;
        this.commentDropdown = this.container.querySelector('#commentSelection');
        for (let i = 0; i < comments.length; i++) {
            const option = document.createElement('option');
            option.setAttribute('value', comments[i].uid.toString());
            var index = selectedComments.filter(comment => comment.rowId === params.node.id).map(function(e) { return e.uid; }).indexOf(comments[i].uid);
            if (index !== -1) {
                option.selected = true;
            }
            option.innerText = comments[i].name;
            this.commentDropdown.appendChild(option);
        }
    }
}

参考

{headerName: '', field: 'comment_name', editable: true, cellEditor: 'commentPopupCellEditor', cellRenderer: 'commentCellRenderer'},

选项

components: {
    commentCellRenderer: CommentCellRenderer,
    commentPopupCellEditor: CommentPopupCellEditor,
},

How it looks like

如何使用 Angular 在 AgGrid 中获取多选下拉列表

How to get multiselect dropdown in AgGrid using Angular

dropdown

angular

ag-grid-angular