我正在使用Angular开发ag-grid,我需要使我的自定义下拉组件在单元格编辑器中双击显示在弹出窗口中,并使其像其他单元格一样正确显示。我们可以通过两种方式创建下拉菜单。
首先使用cellEditor
,其次使用自定义组件。我想将cellEditor
与selectize jquery一起使用,但这似乎不起作用。因此,我将selectize与自定义组件一起使用
{
headerName: "Status",
field: "status",
suppressMovable: false,
type: "drop down2",
colId: 5,
cellClass: "actions-button-cell",
cellEditor: 'dropdown', //Either this
cellEditorFramework:CustomDropdownComponent // or this
},
使用自定义组件,我不得不使用此CSS使下拉菜单可见,使其显示在外部,并且也显示在行选择上方。
::ng-deep .actions-button-cell {
overflow:visible;
}
::ng-deep .ag-row {
z-index: 0;
}
::ng-deep .ag-row.ag-row-focus {
z-index: 1;
}
::ng-deep .ag-root,
::ng-deep .ag-body-viewport,
::ng-deep .ag-body-viewport-wrapper {
overflow: visible;
}
现在,这看起来很糟糕,如果我不使用上面的CSS,则下拉菜单将隐藏在该行中。
第二,假设我使用cellEditor
,但似乎无法将其与selectize jquery集成。以下是cellEditor
function getDropDown() {
function DropDown() {}
DropDown.prototype.init = function(params) {
alert('here');
this.select = document.createElement('select');
// this.select.value = params.value;
this.select.classList.add('email-select');
this.select.style.height = '100%';
this.select.style.width = '100%';
$(this.select).selectize({
valueField: 'name',
labelField: 'name',
placeholder: 'Select'
, options: [
{
description: 'Nice Guy',
name: 'Brian Reavis',
imageUrl: 'http://www.fashionspictures.com/wp-content/uploads/2013/11/short-hairstyles-for-a-square-face-42-150x150.jpg'
},
{
description: 'Other nice guy',
name: 'Nikola Tesla',
imageUrl: 'http://www.fashionspictures.com/wp-content/uploads/2013/11/short-hairstyles-for-a-square-face-42-150x150.jpg'
}
]
});
// let option = document.createElement('option');
// option.value = "One";
// this.select.append= option;
};
DropDown.prototype.getGui = function() {
return this.select;
};
DropDown.prototype.afterGuiAttached = function() {
this.select.focus();
};
DropDown.prototype.getValue = function() {
return this.select.value;
};
DropDown.prototype.destroy = function() {};
DropDown.prototype.isPopup = function() {
return false;
};
return DropDown;
}
这提供了一个错误选择功能,该功能不存在,有时可以工作,但不能将选择功能完全应用于选择字段。请通过以下两种方式中的任意一种来帮助我。
预期结果:
我确定了两个选择。如果我能找到cellEditor的解决方案,那就太好了,那就是找到下拉列表的解决方案,该下拉列表在行选择的上方和外部都有点出现。谢谢!