Ag Grid，使用“列”菜单防止列隐藏/显示
Ag Grid，使用“列”菜单防止列隐藏/显示
提问于 2022-05-31 11:26:26
如何使用Ag中的列菜单防止列隐藏/显示？
让我们以over 这里中的例子为例。
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue example</title>
<meta charSet="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<style media="only screen">
html, body, #app {
height: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
html {
position: absolute;
top: 0;
left: 0;
padding: 0;
overflow: auto;
}
body {
padding: 1rem;
overflow: auto;
}
</style>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<div id="app">
<my-component>Loading Vue example…</my-component>
</div>
<script>
var appLocation = './';
var boilerplatePath = '';
var systemJsMap = {
"@ag-grid-community/core/dist/styles": "https://unpkg.com/@ag-grid-community/core@27.3.0/dist/styles",
"@ag-grid-community/vue": "https://unpkg.com/@ag-grid-community/vue@27.3.0/",
"ag-grid-community": "https://unpkg.com/ag-grid-community@27.3.0/",
"ag-grid-enterprise": "https://unpkg.com/ag-grid-enterprise@27.3.0/",
"ag-grid-vue": "https://unpkg.com/ag-grid-vue@27.3.0/"
};
var systemJsPaths = {
"@ag-grid-community/client-side-row-model": "https://unpkg.com/@ag-grid-community/client-side-row-model@27.3.0/dist/client-side-row-model.cjs.min.js",
"@ag-grid-community/core": "https://unpkg.com/@ag-grid-community/core@27.3.0/dist/core.cjs.min.js",
"@ag-grid-community/csv-export": "https://unpkg.com/@ag-grid-community/csv-export@27.3.0/dist/csv-export.cjs.min.js",
"@ag-grid-community/infinite-row-model": "https://unpkg.com/@ag-grid-community/infinite-row-model@27.3.0/dist/infinite-row-model.cjs.min.js",
"@ag-grid-enterprise/charts": "https://unpkg.com/@ag-grid-enterprise/charts@27.3.0/dist/charts.cjs.min.js",
"@ag-grid-enterprise/clipboard": "https://unpkg.com/@ag-grid-enterprise/clipboard@27.3.0/dist/clipboard.cjs.min.js",
"@ag-grid-enterprise/column-tool-panel": "https://unpkg.com/@ag-grid-enterprise/column-tool-panel@27.3.0/dist/column-tool-panel.cjs.min.js",
"@ag-grid-enterprise/core": "https://unpkg.com/@ag-grid-enterprise/core@27.3.0/dist/core.cjs.min.js",
"@ag-grid-enterprise/excel-export": "https://unpkg.com/@ag-grid-enterprise/excel-export@27.3.0/dist/excel-export.cjs.min.js",
"@ag-grid-enterprise/filter-tool-panel": "https://unpkg.com/@ag-grid-enterprise/filter-tool-panel@27.3.0/dist/filter-tool-panel.cjs.min.js",
"@ag-grid-enterprise/master-detail": "https://unpkg.com/@ag-grid-enterprise/master-detail@27.3.0/dist/master-detail.cjs.min.js",
"@ag-grid-enterprise/menu": "https://unpkg.com/@ag-grid-enterprise/menu@27.3.0/dist/menu.cjs.min.js",
"@ag-grid-enterprise/multi-filter": "https://unpkg.com/@ag-grid-enterprise/multi-filter@27.3.0/dist/multi-filter.cjs.min.js",
"@ag-grid-enterprise/range-selection": "https://unpkg.com/@ag-grid-enterprise/range-selection@27.3.0/dist/range-selection.cjs.min.js",
"@ag-grid-enterprise/rich-select": "https://unpkg.com/@ag-grid-enterprise/rich-select@27.3.0/dist/rich-select.cjs.min.js",
"@ag-grid-enterprise/row-grouping": "https://unpkg.com/@ag-grid-enterprise/row-grouping@27.3.0/dist/row-grouping.cjs.min.js",
"@ag-grid-enterprise/server-side-row-model": "https://unpkg.com/@ag-grid-enterprise/server-side-row-model@27.3.0/dist/server-side-row-model.cjs.min.js",
"@ag-grid-enterprise/set-filter": "https://unpkg.com/@ag-grid-enterprise/set-filter@27.3.0/dist/set-filter.cjs.min.js",
"@ag-grid-enterprise/side-bar": "https://unpkg.com/@ag-grid-enterprise/side-bar@27.3.0/dist/side-bar.cjs.min.js",
"@ag-grid-enterprise/sparklines": "https://unpkg.com/@ag-grid-enterprise/sparklines@27.3.0/dist/sparklines.cjs.min.js",
"@ag-grid-enterprise/status-bar": "https://unpkg.com/@ag-grid-enterprise/status-bar@27.3.0/dist/status-bar.cjs.min.js",
"@ag-grid-enterprise/viewport-row-model": "https://unpkg.com/@ag-grid-enterprise/viewport-row-model@27.3.0/dist/viewport-row-model.cjs.min.js"
};
</script>
<script src="https://unpkg.com/systemjs@0.19.47/dist/system.js">
</script>
<script src="systemjs.config.js">
</script>
<script>System.import('./main.js').catch(function(err) { console.error(err); });</script>
</body>
</html>main.js：
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import 'ag-grid-enterprise';
import { AgGridVue } from 'ag-grid-vue';
import Vue from 'vue';
const VueExample = {
template: `
<div style="height: 100%">
<div class="example-wrapper">
<div>
<span class="button-group">
<button v-on:click="showPivotModeSection()">Show Pivot Mode Section</button>
<button v-on:click="showRowGroupsSection()">Show Row Groups Section</button>
<button v-on:click="showValuesSection()">Show Values Section</button>
<button v-on:click="showPivotSection()">Show Pivot Section</button>
</span>
</div>
<ag-grid-vue
style="width: 100%; height: 100%;"
class="ag-theme-alpine"
:columnDefs="columnDefs"
@grid-ready="onGridReady"
:defaultColDef="defaultColDef"
:sideBar="sideBar"
:rowData="rowData"></ag-grid-vue>
</div>
</div>
`,
components: {
'ag-grid-vue': AgGridVue,
},
data: function () {
return {
columnDefs: [
{ headerName: 'Name', field: 'athlete', minWidth: 200 },
{ field: 'age', enableRowGroup: true },
{ field: 'country', minWidth: 200 },
{ field: 'year' },
{ field: 'date', suppressColumnsToolPanel: true, minWidth: 180 },
{ field: 'sport', minWidth: 200 },
{ field: 'gold', aggFunc: 'sum' },
{ field: 'silver', aggFunc: 'sum' },
{ field: 'bronze', aggFunc: 'sum' },
{ field: 'total', aggFunc: 'sum' },
],
gridApi: null,
columnApi: null,
defaultColDef: {
flex: 1,
minWidth: 100,
sortable: true,
enablePivot: true,
},
sideBar: null,
rowData: null,
};
},
created() {
this.sideBar = {
toolPanels: [
{
id: 'columns',
labelDefault: 'Columns',
labelKey: 'columns',
iconKey: 'columns',
toolPanel: 'agColumnsToolPanel',
toolPanelParams: {
suppressRowGroups: true,
suppressValues: true,
suppressPivots: true,
suppressPivotMode: true,
suppressColumnFilter: true,
suppressColumnSelectAll: true,
suppressColumnExpandAll: true,
},
},
],
defaultToolPanel: 'columns',
};
},
methods: {
showPivotModeSection() {
var columnToolPanel = this.gridApi.getToolPanelInstance('columns');
columnToolPanel.setPivotModeSectionVisible(true);
},
showRowGroupsSection() {
var columnToolPanel = this.gridApi.getToolPanelInstance('columns');
columnToolPanel.setRowGroupsSectionVisible(true);
},
showValuesSection() {
var columnToolPanel = this.gridApi.getToolPanelInstance('columns');
columnToolPanel.setValuesSectionVisible(true);
},
showPivotSection() {
var columnToolPanel = this.gridApi.getToolPanelInstance('columns');
columnToolPanel.setPivotSectionVisible(true);
},
onGridReady(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
const updateData = (data) => params.api.setRowData(data);
fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
.then((resp) => resp.json())
.then((data) => updateData(data));
},
},
};
new Vue({
el: '#app',
components: {
'my-component': VueExample,
},
});style.css：
.example-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
#myGrid {
flex: 1 1 0px;
width: 100%;
}
.button-group {
padding-bottom: 4px;
display: inline-block;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 13px;
}当我转到“名称”列菜单时，我可以隐藏/显示“年龄”列。我不想这样做。如何防止这种功能？
[![enter image description here][1]][1]回答 1
Stack Overflow用户
回答已采纳
发布于 2022-06-01 08:59:02
您是使用AG Grid独立还是适应性强？如果您也像我们一样使用适应性，那么它们有您可以提供的函数，这些函数将设置列菜单是否应该出现在给定的列中。请参阅：https://docs.adaptabletools.com/guide/reference-options-menu#showadaptablecolumnmenu
关于列菜单，一般见：https://docs.adaptabletools.com/guide/ui-column-menu
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72446952
复制相关文章
相似问题
腾讯云开发者
