Question

我想用折叠面板开始网格。附件

中的图片相等

Answer 1

以aggrid提供配置。

***sideBar = false***

要使用默认的侧边栏，请设置网格属性sideBar = true。默认情况下，“列”面板将打开

<AgGridReact
   defaultColDef={this.state.defaultColDef}
   animateRows={true}
   sideBar={false}
/>

Answer 2

您可以configure the sidebar像这样：

var gridOptions = {
  // other options
  sideBar: {
    toolPanels: ['columns', 'filters'],
    hiddenByDefault: false
  }
};

以下是有效的演示

var columnDefs = [{
  field: "athlete",
  width: 150,
  filter: 'agTextColumnFilter'
}, {
  field: "age",
  width: 90
}, {
  field: "country",
  width: 120
}, {
  field: "year",
  width: 90
}, {
  field: "date",
  width: 110
}, {
  field: "gold",
  width: 100
}, {
  field: "silver",
  width: 100
}, {
  field: "bronze",
  width: 100
}, {
  field: "total",
  width: 100
}];

var gridOptions = {
  defaultColDef: {
    // allow every column to be aggregated
    enableValue: true,
    // allow every column to be grouped
    enableRowGroup: true,
    // allow every column to be pivoted
    enablePivot: true,
    sortable: true,
    filter: true
  },
  columnDefs: columnDefs,
  sideBar: {
    toolPanels: ['columns', 'filters'],
    hiddenByDefault: false
  }
};

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
  var gridDiv = document.querySelector('#myGrid');
  new agGrid.Grid(gridDiv, gridOptions);

  // do http request to get our sample data - not using any framework to keep the example self contained.
  // you will probably use a framework like JQuery, Angular or something else to do your HTTP calls.
  var httpRequest = new XMLHttpRequest();
  httpRequest.open('GET', 'https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinners.json');
  httpRequest.send();
  httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState == 4 && httpRequest.status == 200) {
      var httpResult = JSON.parse(httpRequest.responseText);
      gridOptions.api.setRowData(httpResult);
    }
  };
});

<!DOCTYPE html>
<html lang="en">

<head>
  <script>
    var __basePath = '';
  </script>
  <style>
    html,
    body {
      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>
  <script src="https://unpkg.com/ag-grid-enterprise@21.2.1/dist/ag-grid-enterprise.min.js"></script>
</head>

<body>

  <div id="myGrid" class="ag-theme-balham" style="height: 100%;"></div>

  <script src="main.js"></script>
</body>

</html>

Answer 3

通过将defaultToolPanel设置为null或空字符串来隐藏它

public sideBar = {
toolPanels: [
  {
    id: 'columns',
    labelDefault: 'Columns',
    labelKey: 'columns',
    iconKey: 'columns',
    toolPanel: 'agColumnsToolPanel',
    toolPanelParams: {
      suppressRowGroups: true,
      suppressValues: true,
      suppressPivots: true,
      suppressPivotMode: true,
      suppressSideButtons: true,
      suppressColumnFilter: true,
      suppressColumnSelectAll: true,
      suppressColumnExpandAll: true
    }
  }
],
defaultToolPanel: ''

};

Ag-grid hide工具面板

3 个答案: