是的,可以通过编程来制作一个按钮来展开/折叠列分组。以下是使用AG-Grid的JavaScript代码示例:
首先,在网格选项中启用分组功能:
var gridOptions = {
// 其他配置项...
enableGroupEdit: true, // 启用分组编辑
groupUseEntireRow: true // 分组时使用整行
};
接下来,在列定义中,指定哪些列可以被分组:
var columnDefs = [
{ headerName: '列1', field: 'col1', enableRowGroup: true },
{ headerName: '列2', field: 'col2', enableRowGroup: true },
// 其他列定义...
];
然后,编写一个函数来展开/折叠分组:
function toggleGroup(groupId, expanded) {
var model = gridOptions.api.getModel();
var groupInfo = model.getRowGroupColumns()[groupId];
var groupField = groupInfo.colId;
gridOptions.api.setOpenByDefault(true); // 设置默认展开/折叠状态
if (expanded) {
gridOptions.api.getDisplayedRowAtIndex(0).setExpanded(true); // 展开根节点
gridOptions.api.forEachNode(function(node) {
var rowNode = node;
if (rowNode.group && rowNode.field === groupField) {
rowNode.setExpanded(true);
}
});
} else {
gridOptions.api.forEachNode(function(node) {
var rowNode = node;
if (rowNode.group && rowNode.field === groupField) {
rowNode.setExpanded(false);
}
});
}
}
最后,在按钮的点击事件中调用toggleGroup函数,根据需要传递分组ID和展开/折叠状态:
document.getElementById('expandButton').addEventListener('click', function() {
toggleGroup(0, true); // 传递分组ID和展开状态
});
document.getElementById('collapseButton').addEventListener('click', function() {
toggleGroup(0, false); // 传递分组ID和折叠状态
});
这样,当点击展开按钮时,分组将展开;当点击折叠按钮时,分组将折叠。请注意,上述示例中的分组ID为0,您可以根据需要更改为适合您的分组ID。