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

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      menuData: [
        {
          text: "Item1",
          children: [
            { text: "Item11" },
            {
              text: "Item12",
              state: "closed",
              children: [
                { text: "Iteme121" },
                { text: "Iteme122" },
                { text: "Iteme123" }
              ]
            },
            { text: "Item13" },
            { text: "Item14" }
          ]
        },
        { text: "Item2" }
      ],
      gridData: [
        {
          code: "FI-SW-01",
          name: "Koi",
          unitcost: 10.0,
          status: "P",
          listprice: 36.5,
          attr: "Large",
          itemid: "EST-1"
        },
        {
          code: "K9-DL-01",
          name: "Dalmation",
          unitcost: 12.0,
          status: "P",
          listprice: 18.5,
          attr: "Spotted Adult Female",
          itemid: "EST-10"
        },
        {
          code: "RP-SN-01",
          name: "Rattlesnake",
          unitcost: 12.0,
          status: "P",
          listprice: 38.5,
          attr: "Venomless",
          itemid: "EST-11"
        },
        {
          code: "RP-SN-01",
          name: "Rattlesnake",
          unitcost: 12.0,
          status: "P",
          listprice: 26.5,
          attr: "Rattleless",
          itemid: "EST-12"
        },
        {
          code: "RP-LI-02",
          name: "Iguana",
          unitcost: 12.0,
          status: "P",
          listprice: 35.5,
          attr: "Green Adult",
          itemid: "EST-13"
        },
        {
          code: "FL-DSH-01",
          name: "Manx",
          unitcost: 12.0,
          status: "P",
          listprice: 158.5,
          attr: "Tailless",
          itemid: "EST-14"
        },
        {
          code: "FL-DSH-01",
          name: "Manx",
          unitcost: 12.0,
          status: "P",
          listprice: 83.5,
          attr: "With tail",
          itemid: "EST-15"
        },
        {
          code: "FL-DLH-02",
          name: "Persian",
          unitcost: 12.0,
          status: "P",
          listprice: 23.5,
          attr: "Adult Female",
          itemid: "EST-16"
        },
        {
          code: "FL-DLH-02",
          name: "Persian",
          unitcost: 12.0,
          status: "P",
          listprice: 89.5,
          attr: "Adult Male",
          itemid: "EST-17"
        },
        {
          code: "AV-CB-01",
          name: "Amazon Parrot",
          unitcost: 92.0,
          status: "P",
          listprice: 63.5,
          attr: "Adult Male",
          itemid: "EST-18"
        }
      ]
    }
  }
  render() {
    return (
      <div>
        <h2>Split Panel</h2>
        <Layout style={{ width: 700, height: 250 }}>
          <LayoutPanel region="west" split style={{ minWidth: 150, maxWidth: 300 }}>
            <Tree data={this.state.menuData}></Tree>
          </LayoutPanel>
          <Tabs style={{ height: '100%' }}>
            <TabPanel title="Tab1" bodyCls="f-column" border={false}>
              <DataGrid data={this.state.gridData} className="f-full" border={false}>
                <GridColumn field="itemid" title="Item ID"></GridColumn>
                <GridColumn field="name" title="Name"></GridColumn>
                <GridColumn field="listprice" title="List Price" align="right"></GridColumn>
                <GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn>
                <GridColumn field="attr" title="Attribute" width="30%"></GridColumn>
                <GridColumn field="status" title="Status" align="center"></GridColumn>
              </DataGrid>
            </TabPanel>
            <TabPanel title="Tab2"></TabPanel>
            <TabPanel title="Tab3"></TabPanel>
          </Tabs>
        </Layout>
      </div>
    );
  }
}

export default App;