以下是使用Ag-grid为每一行创建下拉菜单的示例代码:
首先,确保你已经安装了Ag-grid和相关的依赖库。
创建一个包含下拉菜单选项的数组:
var dropdownOptions = [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' }
];
// 自定义下拉菜单Cell Renderer
function DropdownCellRenderer() { }
DropdownCellRenderer.prototype.init = function(params) {
// 创建下拉菜单元素
this.select = document.createElement('select');
// 添加下拉菜单选项
dropdownOptions.forEach(function(option) {
var optionElement = document.createElement('option');
optionElement.value = option.value;
optionElement.label = option.label;
this.select.appendChild(optionElement);
}, this);
// 设置初始选中项
this.select.value = params.value;
};
DropdownCellRenderer.prototype.getGui = function() {
return this.select;
};
DropdownCellRenderer.prototype.getValue = function() {
return this.select.value;
};
var columnDefs = [
{ headerName: 'Column 1', field: 'column1', cellRenderer: 'dropdownCellRenderer' },
// 其他列定义
];
var gridOptions = {
columnDefs: columnDefs,
components: {
dropdownCellRenderer: DropdownCellRenderer
},
// 其他配置项
};
// 假设从数据库获取到的数据是一个包含对象的数组
var rowData = [
{ column1: 'option1' },
{ column1: 'option2' },
{ column1: 'option3' }
];
// 将数据绑定到Ag-grid中
gridOptions.api.setRowData(rowData);
通过以上步骤,你就可以为Ag-grid中的每一行创建一个从数据库填充的下拉菜单了。