Question

  import webpack from 'webpack';
  import path from 'path';
  import CopyWebpackPlugin from 'copy-webpack-plugin';

  const SOURCE_PATH = path.resolve(__dirname, 'src');
  const OUTPUT_PATH = path.resolve(__dirname, 'dist');
   const GLOBALS = {
   'process.env.NODE_ENV': JSON.stringify('development'),
   'global.IS_BROWSER': true
   };
 export default {
  debug: true,
 devtool: 'source-map',
  noInfo: false,
  entry: [
'eventsource-polyfill', // necessary for hot reloading with IE
'webpack-hot-middleware/client?reload=true', //note that it reloads the page 
if hot module reloading fails.
'./src/index'
 ],
 target: 'web',
 output: {
 path: OUTPUT_PATH, // Note: Physical files are only output by the 
production 
   build task `npm run build`.
   publicPath: '/',
   filename: 'bundle.js'
  },
  devServer: {
  contentBase: './src'
 },
  plugins: [
new webpack.DefinePlugin({ 'process.env.API_HOST': process.env.API_HOST }),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
 ],
 module: {
loaders: [
  {
    test: /\.js$/,
    include: path.join(__dirname, 'src'),
    loaders: ['babel']
  },
  {
    test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/,
    query: {
      presets: ['es2015', 'react', 'es2017'],
      plugins: [
        'transform-class-properties',
        'transform-object-rest-spread',
        'transform-decorators-legacy',
        'transform-react-jsx',
        'transform-runtime'
      ]
    }
  },
  {
    test: /\.json$/,
    loader: 'json'
  },
  { test: /(\.css)$/, loaders: ['style', 'css'] },

  { test: /\.(png||jpg||jpeg||ico)(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
  { test: /\.gif$/, loader: 'file?name=[name].[ext]' },
  {
    test: /\.scss$/,
    loader: 'style!css!sass?sourceMap'
  },
  {
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: "url-loader?limit=10000&mimetype=application/font-woff"
  },
  {
    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: "file-loader"
  }
  ]
 },
 resolve: {
    alias: {
        "ag-grid": path.resolve('./node_modules/ag-grid'),
        "ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'),
        react: path.resolve('./node_modules/react')
    },
    extensions: ['', '.js', '.jsx']
}
};

这是组件

 import React, { PropTypes } from 'react';
import { Link, browserHistory } from 'react-router';
import {AgGridReact, AgGridColumn} from "ag-grid-react";
import "ag-grid/dist/styles/ag-grid.css";
import "ag-grid/dist/styles/theme-blue.css";

 class clientList extends React.Component {
   constructor(props) {
    super(props);
    this.state = {

        rowData: [
            {make: "Toyota", model: "Celica", price: 35000},
            {make: "Ford", model: "Mondeo", price: 32000},
            {make: "Porsche", model: "Boxter", price: 72000}
        ]

    };

 }


onGridReady(params) {
    this.gridApi = params.api;
    this.columnApi = params.columnApi;

    this.gridApi.sizeColumnsToFit();
}

render() {
    let containerStyle = {
        height: 115
    };
    return (
       <div>
            <div style={containerStyle} className="ag-theme-blue">
                <AgGridReact
                    // properties
                    rowData={this.state.rowData}

                    // events
                    onGridReady={this.onGridReady}
                    enableSorting
                    enableFilter>

                    {/*column definitions */}
                    <AgGridColumn field="make"></AgGridColumn>
                    <AgGridColumn field="model"></AgGridColumn>
                    <AgGridColumn field="price"></AgGridColumn>
                </AgGridReact>
            </div>
        </div>

    );
}

sorting and filtering is working fine but i cant able to get in the tabular format as I mentioned in the picture. }

export default clientList;

任何人，请帮帮我。我正在为表格的AgGridReact组件工作，我能够使用此组件提供的所有功能，但表格不会出现。

Answer 1

您编码的方式已修改您的网络包设置。点击此处Loading CSS https://www.ag-grid.com/react-more-details/#gsc.tab=0

或者

直接将css包含在html文件中。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/15.0.0/styles/ag-grid.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/15.0.0/styles/ag-theme-blue.css">

在此处查看index.html文件

推荐的方法是编辑您将拥有的webpack / gulp设置。

表格样式在AgGridReact组件上无法正常工作？

1 个答案: