我们有 AgGrid，我们需要一个用于其中一列的多选下拉菜单，我们使用的是 Angular 7。
我能够找到多选下拉菜单，但不能找到 agGrid Cell。
请帮忙。
我能够制作agGrid，尝试使用下面的链接但无法获取。
https://www.c-sharpcorner.com/blogs/how-to-add-combobox-in-aggrid-or-edit-grid-coloumn-with-combobox
预期：agGrid 单元格中的多选下拉菜单
【问题讨论】：
标签： angular dropdown ag-grid-angular
我已经使用 Ag-grid 工作了几个月，我可以告诉你，将自定义的东西放到 Aggrid 单元格上是非常困难的。
首先，您可以使用属于相关Ag-grid表的GridOptions的frameworkComponents参数。
使用说明： 您有一个独立的组件，可让您在下拉元素中选择多个项目。我们将此组件命名为 MultiSelectComponent
首先，从任何类型的 Ag-grid 模块中导入 GridOptons。我正在使用企业版。
import { GridOptions, ... } from '@ag-grid-enterprise/all-modules';
import { MultiSelectComponent} from './multi-select-component';
在 Component 类中，声明细节。
export class Component implements OnInit {
...
columnDefs: any;
...
gridOptions: GridOptions;
this.gridOptions = {
frameworkComponents: {
cellCustomComponent: MultiSelectComponent
}
}
在这里我们定义列和我们想要的选项。第一列定义包含我们的自定义组件。根据我的 自定义组件可以通过两种方式在 Ag-grid 上显示：
1) 可以在网格准备就绪时显示。与cellRenderer一起使用。
2) 可以在点击单元格后直接显示出来进行编辑。为此，您必须将列声明为可编辑为 true。它也与cellEditor 和cellEditorParams 一起使用。
现在我们使用第一个选项。我的意思是，cellRenderer 一个。我也向您推荐同样的方法。
this.columnDefs = [
{
headerName: 'Names', field: 'names',
cellRenderer: 'cellDatePicker', pinned: 'left',
},
// other columns definitions here
]
现在几乎可以在我们刚刚定义的“名称”列下的单元格内显示我们自己的自定义组件了。如果我们的自定义组件是一个日期选择器，那么它会显示为那个日期选择器。如果它是一个表情符号选择器选择器，那么它就是这样。 （例如，click the link 用于 cellEditor 和 cellRenderer）
我自己的自定义组件，datepicker：
【讨论】：
我会让它变得简单。我花了 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,
},
【讨论】：