要隐藏 Ag-grid 工具面板并折叠它,可以使用以下代码示例:
toolPanelSuppressSideButtons
属性为 true
。.ag-side-buttons
,并设置 display: none;
以隐藏工具面板的按钮。onGridReady
回调函数,使用 gridOptions.api.closeToolPanel()
方法来折叠工具面板。以下是完整的代码示例:
HTML:
Ag-grid 隐藏工具面板已折叠
CSS (styles.css):
.ag-side-buttons {
display: none; /* 隐藏工具面板的按钮 */
}
JavaScript (script.js):
document.addEventListener('DOMContentLoaded', function() {
var gridOptions = {
columnDefs: [
{ headerName: "Make", field: "make" },
{ headerName: "Model", field: "model" },
{ headerName: "Price", field: "price" }
],
rowData: [
{ make: "Toyota", model: "Celica", price: 35000 },
{ make: "Ford", model: "Mondeo", price: 32000 },
{ make: "Porsche", model: "Boxster", price: 72000 }
],
toolPanelSuppressSideButtons: true, // 隐藏工具面板的按钮
onGridReady: function(params) {
params.api.closeToolPanel(); // 折叠工具面板
}
};
new agGrid.Grid(document.querySelector('#myGrid'), gridOptions);
});
以上代码示例将隐藏 Ag-grid 工具面板的按钮,并在加载完成时折叠工具面板。
上一篇:Ag-Grid 行的 DOM
下一篇:Ag-grid 隐藏筛选列