时间戳

首页 > 解决方案 > 取消选中并选中 ag-Grid 中 columnsMenuTab（列列表）中某些列的复选框

reactjs - 取消选中并选中 ag-Grid 中 columnsMenuTab（列列表）中某些列的复选框

问题描述

https://www.ag-grid.com/javascript-grid-column-menu/

我正在尝试创建一个“ columnsMenuTab”，column Header其中包含下拉列表中选中和未选中的列列表。

(1) 如何勾选和取消勾选“columnsMenuTab”的复选框（可能在columnDefs中）。

  this.state = {
     rowData: [
    { "Name": "", "Id": '', "Priority": "Medium", "Date": "24/08/2008", "Status": "Completed", "gold": 8, "silver": 0, "bronze": 0, "total": 8 }
       ],
     columnDefs: [
      { field: 'Name'},    // checked in columnsMenuTab
    { field: 'Id'},        // checked in columnsMenuTab
    { field: 'Priority'},  // unchecked in columnsMenuTab
    { field: 'Date'},      // checked in columnsMenuTab
    { field: 'Status'}    // unchecked in columnsMenuTab
    ]
    }
    
    
     render() {
        return (
          <React.Fragment>
            <div style={{ width: '100%', height: '100%' }}>
              <div className="example-wrapper">
                  <div id="myGrid" className="ag-theme-alpine" style={{ height: '500px', width: '1024px' }}>
                    <AgGridReact
                      columnDefs={this.state.columnDefs}
                      defaultColDef={this.state.defaultColDef}
                      overlayLoadingTemplate={this.state.overlayLoadingTemplate}
                      overlayNoRowsTemplate={this.state.overlayNoRowsTemplate}
                      onGridReady={this.onGridReady}
                      rowData={this.state.rowData}
                      components={this.state.components}
                      frameworkComponents={this.state.frameworkComponents}
                      enableRangeSelection={true}
                      allowContextMenuWithControlKey={true}
                      icons={this.state.icons}
                      getContextMenuItems={this.getContextMenuItems}
                      popupParent={this.state.popupParent}
                    ></AgGridReact>
                  </div>
                ) 
                }
              </div>
            </div>
          </React.Fragment>
        )
      }

附加plunker：- https://plnkr.co/edit/XbyFsa49VjfReShq

标签： reactjsag-gridag-grid-react

解决方案

有两种方法可以显示隐藏列/列-（真/假）

(1)
     params.columnApi.setColumnsVisible([...objArr], false) ; // if multiple columns need to be hidden set as false or true
        
        params.columnApi.setColumnVisible("ColumnName", false) ; // if one columns need to be hidden set as false or true

(2)

colDefs:
=========

    hide: true/false

推荐阅读