【问题标题】:Can't get ag-grid to display无法显示 ag-grid
【发布时间】:2019-03-27 01:15:38
【问题描述】:

我有一个带有一些简单虚拟数据的基本 ag-grid,但它仅在我不导入库提供的 .css 文件时才显示,即使这样它也显示不正确。

摘自我的 package.json:

"ag-grid": "10.0.1",
"ag-grid-react": "10.0.0",
"react": "15.4.2"

来自我的 React 组件: 构造函数:

this.state = { columnDefs: [{headerName: 'Product', field: 'product'},{headerName: 'Country', field: 'country'}], rowData: [{product: 'IOL', country: 'US'}, {product: 'Suture', country: 'IN'}]}

来自渲染():

return (
        <div id='grid'>
            {/*<div id='grid' className='ag-fresh'>*/}
            <div>
                Here's the grid...
            </div>
            <AgGridReact

                // listen for events with React callbacks
                onGridReady={this.onGridReady.bind(this)}
                // onRowSelected={this.onRowSelected.bind(this)}
                // onCellClicked={this.onCellClicked.bind(this)}

                // binding to properties within React State or Props
                showToolPanel={this.state.showToolPanel}
                quickFilterText={this.state.quickFilterText}
                icons={this.state.icons}

                // column definitions and row data are immutable, the grid
                // will update when these lists change
                columnDefs={this.state.columnDefs}
                rowData={this.state.rowData}

                // or provide props the old way with no binding
                rowSelection="multiple"
                enableSorting="true"
                enableFilter="true"
                rowHeight="22"
            />
        </div>)

如果我在不导入任何 .css 的情况下运行此代码,我会得到一个混乱的网格,例如:

现在,如果我按照入门指南导入 css:

import 'ag-grid-root/dist/styles/ag-grid.css'  // see webpack config for alias of 'ag-grid-root'
import 'ag-grid-root/dist/styles/theme-fresh.css'

...然后网格的任何部分都不会显示(只有我在网格之前的 div)。导入 css 后,我是否为网格分配了主题都没有关系,没有任何显示。

【问题讨论】:

  • 您是否为AgGridReact div 的父div 设置了高度?
  • @Jared Moser 就是这样,谢谢。

标签: ag-grid ag-grid-react


【解决方案1】:

我遇到了类似的问题,数据行没有显示,只是分页。设置固定的 div 高度可以使行显示,但将 domLayout: 'autoHeight' 添加到 gridOptions 意味着它始终是正确显示的正确高度。

【讨论】:

    猜你喜欢
    • 2020-05-27
    • 2020-01-09
    • 2021-12-21
    • 2021-08-20
    • 2016-08-02
    • 2021-09-29
    • 1970-01-01
    • 2019-10-04
    • 2017-04-11
    相关资源
    最近更新 更多