Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
import React from 'react';
import { DataGrid, GridColumn } from 'rc-easyui';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      conf: {
        options: {
          columns: [
            { field: 'company', title: 'Company Name' },
            { field: 'contact', title: 'Contact Name' },
            { field: 'country', title: 'Country' }
          ],
          data: [
            { company: 'Speed Info', contact: 'Minna John', country: 'Sweden' }
          ]
        },
        subgrid: {
          options: {
            columns: [
              { field: 'orderdate', title: 'Order Date' },
              { field: 'shippeddate', title: 'Shipped Date' },
              { field: 'freight', title: 'Freight' }
            ],
            data: [
              { orderdate: '08/23/2012', shippeddate: '12/25/2012', freight: 9734 }
            ]
          },
          subgrid: {
            options: {
              columns: [
                { field: 'price', title: 'Unit Price', align: 'right' },
                { field: 'quantity', title: 'Quantity', align: 'right' },
                {
                  field: 'discount', title: 'Discount', align: 'right', formatter: function (value) {
                    return value * 100 + '%'
                  }
                }
              ],
              data: [
                { price: 923, quantity: 2312, discount: 0.2 }
              ]
            },
            subgrid: {
              options: {
                columns: [
                  { field: 'pnumber', title: 'Product Number' },
                  { field: 'pname', title: 'Product Name' },
                  { field: 'supplier', title: 'Supplier' }
                ],
                data: [
                  { pnumber: '00100823', pname: 'Canon PowerShot A1300', supplier: 'Canon' },
                  { pnumber: '12023423', pname: 'Cisco RV110W-A-NA-K9', supplier: 'Cisco' },
                  { pnumber: '82312393', pname: 'Nikon COOLPIX L26 16.1 MP', supplier: 'Nikon' }
                ]
              }
            }
          }
        }
      }
    }
  }
  renderGrid(conf) {
    let columns = conf.options.columns.map((col, index) => (
      <GridColumn key={index} {...col}></GridColumn>
    ));
    let props = Object.assign({}, conf.options);
    if (conf.subgrid) {
      props.renderDetail = () => {
        return (
          <div style={{ marginLeft: 30 }}>
            {this.renderGrid(conf.subgrid)}
          </div>
        )
      }
      columns.unshift((
        <GridColumn key="e" field="e" expander width={30}></GridColumn>
      ))
    }
    return (
      <DataGrid {...props}>
        {
          columns
        }
      </DataGrid>
    )
  }
  render() {
    return (
      <div>
        <h2>Nested SubGrid</h2>
        {
          this.renderGrid(this.state.conf)
        }
      </div>
    );
  }
}

export default App;