堆栈内存溢出
  简体   繁体   English

Ag Grid，使用列菜单防止列隐藏/显示

[英]Ag Grid, prevent column hide/show using the column menu

 原文  2022-05-31 11:26:26  8   1    vue.js/ menu/ toggle/ multiple-columns/ ag-grid

问题描述

How could I prevent column hide/show using the column menu in Ag Grid?如何使用 Ag Grid 中的列菜单防止列隐藏/显示？

Eg let us take the example from over here .例如，让我们从这里举个例子。

index.html:索引.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&hellip;</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:主.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:样式.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;
}

When I go to the Name's column menu I can hide/show the Age column.当我进入姓名栏菜单时，我可以隐藏/显示年龄栏。 I do not want to be able to be able to do that.我不想能够做到这一点。 How could I prevent this functionality?我怎么能阻止这个功能？

[![enter image description here][1]][1]

1 个解决方案

解决方案1
 1 已采纳  2022-06-01 08:59:02

Are you using AG Grid standalone or with Adaptable?您是单独使用 AG Grid 还是与 Adaptable 一起使用？ If you are using Adaptable also as we are then they have functions you can provide which will set whether or not the Column menu should appear in a given column.如果您也像我们一样使用 Adaptable，那么它们具有您可以提供的功能，这些功能将设置列菜单是否应出现在给定列中。 See: https://docs.adaptabletools.com/guide/reference-options-menu#showadaptablecolumnmenu请参阅： https ://docs.adaptabletools.com/guide/reference-options-menu#showadaptablecolumnmenu

And for Column Menus generally see: https://docs.adaptabletools.com/guide/ui-column-menu对于列菜单，通常请参见： https ://docs.adaptabletools.com/guide/ui-column-menu

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何隐藏Ag Grid中的列？ - How to hide column in Ag Grid? 如何在 Ag-grid 中隐藏列 header？ - How to hide column header in Ag-grid? 如何在手机上隐藏农业网格列？ - How to hide ag-grid column on mobile? AG网格-如果未对其他列进行排序，则恢复默认排序 - AG Grid - restore default sort if no other column is sorted 在 Ag-Grid 中导出到 excel 时，将 css class 应用于列 - Apply css class to column when export to excel in Ag-Grid 如何在单个 ag-grid 单元格中显示两列值？ - How to display two column values in a single ag-grid cell? 根据用户选择隐藏和显示表格列 - Hide and show table column based on user selection ag-grid: key.forEach 不是 function 调整列大小时出现控制台错误 - ag-grid: key.forEach is not function console error while resizing column 在 Vue 3 中显示/隐藏菜单 - Show/hide menu in Vue 3 Vue Ag-grid 一次隐藏/取消隐藏所有列 - Vue Ag-grid hide/unhide all columns at once
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM